Angular 2 - Component Input Issue

Question

I am having trouble getting angular2 to pass input into a child component. Within the child component, the object is always undefined. Here is my code.

My markup in the parent component

<peoplesearchlist [people]="peopleSearchData"></peoplesearchlist>

The child component

import {Component, View, Input} from 'angular2/angular2';

@Component({
    selector: 'peoplesearchlist',
    inputs: ['people']
})
@View({
    templateUrl: './directory/peopleSearchList.html'
})
export class PeopleSearchList {
    constructor() {
    console.log('People-Search-List:' + this.people);
    }
}

Abbreviated Parent Component

import {Component, View, Input, bootstrap} from 'angular2/angular2';
import {Http, Headers} from 'angular2/http';
import {PeopleSearchBar} from './peopleSearchBar';
import {PeopleSearchList} from './peopleSearchList';

@Component({
    selector: "directory-people-search"
})
@View({
    templateUrl: "./directory/peopleSearch.html",
    directives: [PeopleSearchBar, PeopleSearchList]
})
export class PeopleSearch
{
    constructor(http: Http) {
         this.searchString = '';
         this.http = http;

        this.peopleSearchData = {
            faculty: [],
            students: [],
            retirees: []
        };

        console.log('People-Search' + this.peopleSearchData);
    }   
}

If I look in my console, I see first the log from the parent component with the object, then the log from the child component as undefined. I've tried using @Input people, but have the same behavior.

I am using ES6 with traceur. I have looked at this issue and could not resolve my issue: Angular 2 Component @Input not working

Print it inside `afterViewInit`, at construction time it won't work. — Eric Martinez, Nov 25 '15 at 15:45

score 2 · Answer 1 · answered Sep 05 '16 at 13:11

I know this question is already 9 months old and you've probably managed to do it yourself by still:

The problem is that you're trying to get component's value in the constructor which is called when this component is instantiated but the bindings aren't initialized yet. You need to implement AfterViewInit interface instead of the constructor:

@Component(...)
export class PeopleSearchList implements AfterViewInit {
    constructor() {
    }

    ngAfterViewInit() {
        console.log('People-Search-List:' + this.people);
    }
}

score 0 · Answer 2 · answered Jan 20 '16 at 13:45

Try something like, it worked for me:

import {Component, View, Input} from 'angular2/angular2';

@Component({
    selector: 'peoplesearchlist'
})
@View({
    templateUrl: './directory/peopleSearchList.html'
})
export class PeopleSearchList {
    @Input() people: Object
    constructor() {
    console.log('People-Search-List:' + this.people);
    }
}

score 0 · Answer 3 · answered Apr 16 '18 at 18:29

0

Use ngOnChanges() to detect when data comes in your input. The constructor is called before the input is available.

ngOnChanges(): void {
    console.log('People-Search-List:' + this.people);
}

answered Apr 16 '18 at 18:29

Jimmy Kane

16,223
11
86
117

Angular 2 - Component Input Issue

3 Answers3