Why can't data be displayed in the template?

Question

JavaScript

I'm currently working with Angular2 and I can't figure out why data isn't being output to the template. AppComponent renders the value to the template. But TestComponent does not display the variable in the template, while the event handler on the h1 tag fires.

@Component({
    selector: 'my-app',
    template: `<h1>{{app}}</h1><router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
    {path:'/user/settings', name: 'TestComponent', component: TestComponent},
])

export class AppComponent {
    app = 'AppComponent';
}

document.addEventListener('DOMContentLoaded', function main() {
    bootstrap(AppComponent, [
        ROUTER_PROVIDERS, HTTP_PROVIDERS
    ]);
});

@Component({
    selector: 'test',
    template: '<h1 (click)="clickMethod()">test: <i>{{component}}</i></h1>',
})

export class TestComponent implements OnInit {
    component = 'TestComponent';

    clickMethod () {
        alert(this.component);
    }

    constructor () {
        console.log('constructor TestComponent');
    }
    ngOnInit() {
        console.log('ngOnInit');
    }
}