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
– Eric Martinez, Commented Nov 25, 2015 at 15:45

martin · Accepted Answer · 2016-09-05 13:11:48Z

2

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

answered Sep 5, 2016 at 13:11

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

Comments

bre · Accepted Answer · 2016-01-20 13:45:37Z

0

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

answered Jan 20, 2016 at 13:45

bre

8901 gold badge7 silver badges13 bronze badges

Comments

Jimmy Kane · Accepted Answer · 2018-04-16 18:29:42Z

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, 2018 at 18:29

Jimmy Kane

16.9k12 gold badges92 silver badges121 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Component Input Issue

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related