@Input binding does not work when I put it under the router component

Question

Updated

Answer

I just found out what happened. I need to load the pollyfills script after systemjs . Well, this is a known router issue:

Concat/Load Order

 'node_modules/systemjs/dist/system.src.js', 'node_modules/angular2/bundles/angular2-polyfills.js' 

---

Problem

I am trying to use my own component library in my application. After I inserted the component under the page inside the router component, the title component decorated with @Input is not displayed:

I need it to display title properties inside the page.

PS:

• I see this one , but it is not suitable for my case.

• @Input: link

Dependencies

 { "angular2": "2.0.0-beta.7", "systemjs": "0.19.22", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.5.15" } 

Component

 import {Component, Input} from 'angular2/core'; @Component({ selector: 'test', template: ` OK MAN PLZ WORK {{title}} ` }) export class Test { @Input() title: string; } 

Container

 import {Component} from 'angular2/core'; import {Test} from './test' @Component({ selector: 'container', directives: [Test], template: ` <test title="test"></test> ` }) export class Container { } 

Loading

 import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; import {Container} from './container; @Component({ selector: 'app', directives: [ROUTER_DIRECTIVES], template: ` <router-outlet></router-outlet> ` }) @RouteConfig([ { path: '/', component: Container, name: 'Container'} ]) class AppComponent {} bootstrap(AppComponent, ROUTER_PROVIDERS); 

Answer 1

In your code, the header is an attribute:

 <test title="test"></test> 

You should use property binding :

 <test [title]="test"></test> 

Answer 2

This works for me. I got the test value in the title input. See This plunkr: https://plnkr.co/edit/dZSMbVnvoNRXSbiNFbQX?p=preview .

What expected behavior do you want {{title}} display "test" ?