Angular2 how to bind to a custom component input parameter

Question

I've a custom component for displaying phone numbers (stm-phone-number). It has an @Input() parameter called phoneNumber. When I try to bind data to it in a *ngFor, I get this error message:

Can't bind to 'phoneNumber' since it isn't a known property of 'stm-phone-number'.

Here's my code:

import { Component, OnInit, Input} from '@angular/core';

import { KeyValueModel } from '../../models/types/key-value';

@Component({
    moduleId: module.id,
    selector: 'stm-phone-number',
    templateUrl: './phone-number.component.html',
    styleUrls: [ './phone-number.css' ],
    providers: [],
    directives: []
})
export class PhoneNumberComponent implements OnInit 
{
    @Input() phoneNumber: KeyValueModel<string,string>; 

    constructor ()
    {
    }


    ngOnInit()
    {
    }
}

and here's how I'm using it:

<section class="grid-block" *ngFor="let entry of PhoneNumberList">
    <stm-phone-number [phoneNumber]="entry"></stm-phone-number>
</section>

NOTE: PhoneNumberList is an array of KeyValueModel<string,string>

How do you bind an iterative value inside ngFor to an @Input property of a custom component?

Günter Zöchbauer · Accepted Answer · 2016-09-01 13:46:31Z

2

You need to add PhoneNumberComponent to the directives: [...] list of the module where you are using it or import the module that contains PhoneNumberComponent (>= RC.5) otherwise the component will not be instantiated, which is usually what leads to the error you mentioned.

answered Sep 1, 2016 at 13:46

Günter Zöchbauer

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

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

Collectives™ on Stack Overflow

Angular2 how to bind to a custom component input parameter

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related