CODEWITHSUNDEEP
javascriptangular
dopatraman
dopatraman

Reputation: 13908

Cant bind to ___ since it isnt a known native property

I am trying to use *ngFor to render a list of components:

<componentx
    *ngFor="let a of data"
    [viewName]="a.name"
    [viewQuery]="a.prop2"
    [viewValues]="a.prop3"></componentx>

// ...
export class App {
    public data:any[];
    constructor() { this.data = [{name: 'foo', prop2: 'bar', prop3: 'hello'}]}

}

This is the component itself:

export class ComponentX {
    @Input() viewName:string;
    @Input() viewQuery:string;
    @Input() viewValues:any[]; 
}

When I run this code I get the following error:

Error: Uncaught (in promise): Template parse errors:
Can't bind to 'viewName' since it isn't a known native property ("
     <componentx
        *ngFor="let a of data"
        [ERROR ->][viewName]="a.name"
        [viewQuery]="a.prop2"
        [viewValues]="a.prop3"></componentx>

What am I doing wrong?

Upvotes: 0

Views: 49

Answers (2)

Milad
Milad

Reputation: 28590

This error generally means:

1- That specific @Input doesn't exits in your component , which in your case it does.

2- You've forgotten to declare your component in the root app module.

import {ComponentX} from 'its/path';

@NgModule({ 
    declarations:[ComponentX]
}) 
export class AppModule { 
}

Upvotes: 1

user6801750
user6801750

Reputation: 242

Please make sure that you did import your component -'ComponentX' in class 'App'

Upvotes: 1

Related Questions