How to retrieve the value of an input in Angular 2 project without typescript

Question

I can retrieve the value in the view but not in the construtor. My component is in an ngFor and I want to edit each item independently. That's why I create a child component

 <li style="list-style-type: none;" *ngFor="let event of item.Events">
 ... <child-component [demo]="event"></child-component>

In the child component : I can display the result of demo in the view but I can not retrieve it in the constructor to be able to manipulate it

@Component({
    selector: 'child-component',
    queries: {
        content: new ViewChild('content')
    },
    templateUrl: 'build/pages/dashboard/timeline/timeline-feeling/index.html',
    ...
    inputs: ['demo'],
    ...
})

export class TimelinFeeling{
    static get parameters () {
        return [];
    }

    constructor () {
        this.demo = demo;
        console.log(this.demo); //return undefined
    }

Cobus Kruger · Accepted Answer · 2017-02-22 14:10:00Z

1

Declare the property (TypeScript requirement) and decorate it with @Input (Angular requirement):

import { Input, ViewChild, ElementRef } from '@angular/core';
@Component({
    selector: 'child-component',
    templateUrl: 'build/pages/dashboard/timeline/timeline-feeling/index.html',
    ...
})

export class TimelinFeeling{
    @Input() public demo = null;
    @ViewChild('content') content: ElementRef;
    static get parameters () {
        return [];
    }

    ngOnInit () {
        this.demo = demo;
        console.log(this.demo); //return undefined
    }

Finally, check the value in ngOnInit instead.

edited Feb 22, 2017 at 14:10

answered Feb 22, 2017 at 13:50

Cobus Kruger

8,6655 gold badges66 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yohann Atticot Over a year ago

thank you for your quick reply. I have this error with your solution : Syntax Error Unexpected token (31:18)

Cobus Kruger Over a year ago

Okay, but did you use it as is? What line corresponds with (31:18) in your code?

Günter Zöchbauer · Accepted Answer · 2017-02-22 13:59:37Z

0

Input values are not yet set in the constructor. Use ngOnInit() instead:

ngOnInit () {
    console.log(this.demo); //return undefined
}

edited Feb 22, 2017 at 13:59

answered Feb 22, 2017 at 13:48

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

3 Comments

Yohann Atticot Over a year ago

thank you for your quick reply. I have this error with your solution : ORIGINAL EXCEPTION: ReferenceError: demo is not defined

Günter Zöchbauer Over a year ago

You should have the same problem in the code in your question. Not sure what the intention was for this line. I guess you can just remove it.

Günter Zöchbauer Over a year ago

Glad to hear :)

Collectives™ on Stack Overflow

How to retrieve the value of an input in Angular 2 project without typescript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related