angular2 @input not working

Question

I'm gonna pass a value into my custom component but it shows me an error in console

Can't bind to 'isFavorite' since it isn't a known native property

here is my code:

favorite.component.ts

import {Component,Input} from 'angular2/core'
@Component ({
    selector:'favorite',
    template:`
    <i class="glyphicon"
    [class.glyphicon-star-empty]="!isFavorite"
    [class.glyphicon-star]="isFavorite"
    (click)="onClick()">
    </i>
    `
})
export class FavoriteComponent{
    @Input() isFavorite = false;
    onClick(){
        this.isFavorite = !this.isFavorite;
    }
}

app.component.ts

import {Component} from 'angular2/core'
import {FavoriteComponent} from './favorite.component'

@Component({
    selector: 'my-app',
    template: `
    <favorite [isFavorite]="true"></favorite>
    `,
   directives: [FavoriteComponent]
})
export class AppComponent {}

UPDATE: the above code is better way to achieve this functionality and you can fix the problem by passing the name to @input() -> @Input('isFavorite') isFavorite = false;

different way but the same result

i also tried below code but it shows me the same error!

favorite.component.ts

import {Component,Input} from 'angular2/core'
@Component ({
    selector:'favorite',
    template:`
    <i class="glyphicon"
    [class.glyphicon-star-empty]="!isFavorite"
    [class.glyphicon-star]="isFavorite"
    (click)="onClick()">
    </i>
    `,
    inputs: ['isFavorite:is-favorite']
})
export class FavoriteComponent{
    @Input('is-favorite') isFavorite = false;
    onClick(){
        this.isFavorite = !this.isFavorite;
    }
}

app.component.ts

import {Component} from 'angular2/core'
import {FavoriteComponent} from './favorite.component'

@Component({
    selector: 'my-app',
    template: `
    <favorite is-favorite="true"></favorite>
    `,
   directives: [FavoriteComponent]
})
export class AppComponent {}

what's wrong in my code?

Have you tried without inputs: ['isFavorite:is-favorite']? — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 13, 2016 at 11:15
You need to have quite an old version (alpha.x) for this not to work. I use Angular since the first beta and have never seen an issue with this. Do you still have the inputs: [...] in the @Component(...) decorator? — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 14, 2016 at 6:55

Günter Zöchbauer · Accepted Answer · 2016-06-13 11:19:35Z

1

Only use inputs: [...] OR @Input(...) but not both at the same time:

import {Component,Input} from 'angular2/core'
@Component ({
    selector:'favorite',
    template:`
    <i class="glyphicon"
    [class.glyphicon-star-empty]="!isFavorite"
    [class.glyphicon-star]="isFavorite"
    (click)="onClick()">
    </i>
    `,
    // inputs: ['isFavorite:is-favorite']
})
export class FavoriteComponent{
    @Input('is-favorite') isFavorite = false;
    onClick(){
        this.isFavorite = !this.isFavorite;
    }
}

The error messages comes from

<favorite [isFavorite]="true"></favorite>

If you use

inputs: ['isFavorite:is-favorite']

or

@Input('is-favorite') isFavorite = false;

it means the property is named is-favorite but the value is assigned to the class field isFavorite.

If you want to use it like

<favorite [isFavorite]="true"></favorite>

define it like

inputs: ['isFavorite']

or

@Input() isFavorite = false;

answered Jun 13, 2016 at 11:19

Günter Zöchbauer

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

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

7 Comments

Ali Sherafat Over a year ago

isFavorite is always false (uses default class field) but i want to make it true

Günter Zöchbauer Over a year ago

How do you want to use it? is-favorite="..." or isFavorite="..."?

Günter Zöchbauer Over a year ago

If you want to assign the value true instead of the string 'true', then use [isFavorite]="true"

Ali Sherafat Over a year ago

i'm using @Input() isFavorite = false; and <favorite [isFavorite]="true"></favorite> but it doesn't work!

Günter Zöchbauer Over a year ago

Did you check my plunker? I think this is what you want.

|

Collectives™ on Stack Overflow

angular2 @input not working

different way but the same result

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

different way but the same result

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related