Nesting Angular component inside nested component -

guys!

my problem have component nested inside component component route. it's this: (main component router-outlet) appcomponent -> leadercomponent -> navigationpathcomponent. inside last component use @input() retrieve values parent , works inside component code not in template.

here code:
navigationpathcomponent:

import { component, input } "@angular/core"; @component({     selector: "navigation-path",     template: "{{los}}",     style: "irrelevant"] })  export class navigationpathcomponent {     @input() los: string; } 

and inside leadercomponent template there is:

<navigation-path los="somestring"></navigation-path>

which should result in if add {{los}} <navigation-path> template should output somestring in browser instead outputs nothing. although if log out inside component code output somestring console.

p.s. if move <navigation-path> appcomponent template (one nesting level higher) works perfectly. possible nest components inside nested component in angular? i'm working on angular v4.2.4.

you need use [] syntax around property when passing through: [los]="somestring".