angular - Template property is undefined while others are?

Question

I'm trying to define a simple component, with several properties :

randomFile.html :

<dico [dicoID]="201125" [dicoLang]="en" [delayedLoading]="false"></dico>
<dico [dicoID]="201126" [dicoLang]="en" [delayedLoading]="false"></dico>

Here is my component definition :

dico.component.ts :

@Component({
    selector: 'dico',
    template: `{{text}}`
})

class Dico implements AfterViewInit {
    @Input() private dicoID: string;
    @Input() private dicoLang: string;
    @Input() private delayedLoading :boolean;
    public text: string = null;

    constructor(...) {
    }

    ngAfterViewInit() {
        alert(this.dicoID + " " + this.dicoLang + " " + this.delayedLoading);

        // Output 1 => 201125 undefined false 
        // Output 2 => 201126 undefined false 
        (...)
    }

    (...)
}

----

@Component({
    template: `<dico [dicoID] [dicoLang] [delayedLoading]></dico>`,
    directives: [Dico]
})

// Définition du composant DicoComponent
export class DicoComponent {

}  

As you can see in the ngAfterViewInit, the second property "dicoLang" is undefined, and I don't understand why... Am I doing something wrong ?

Answer 1

If you want to directly pass values inside property binding you should do use attribute instead of property binding. If you wrap your attribute with [] (property binding), it will try to evaluate that variable with Component context(this).

<dico dicoID="201125" dicoLang="en" [delayedLoading]="false"></dico>
<dico dicoID="201126" dicoLang="en" [delayedLoading]="false"></dico>