CODEWITHSUNDEEP
angular
Luke Bailey
Luke Bailey

Reputation: 31

Angular 2 - Component Input Issue

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

Upvotes: 2

Views: 1038

Answers (3)

Jimmy Kane
Jimmy Kane

Reputation: 16865

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);
}

Upvotes: 0

martin
martin

Reputation: 96969

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);
    }
}

Upvotes: 2

bre
bre

Reputation: 890

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);
    }
}

Upvotes: 0

Related Questions