angularjs directive - Angular 2 multiple errors such as Template parse errors and Can't bind to -

i new ag2.just started 1 day. tried online tutorial , follow coding error.

directives: [favour_component]  // line of coding marked red 

then chrome console, error

unhandled promise rejection: template parse errors:can't bind 'isfavour' since isn't known property of 'favours'. 

may know whats wrong coding?

app.component.ts

import { component } '@angular/core'; import {favour_component} './favour.component' @component({   selector: 'my-app',   template: `           <favours [isfavour]="post.isfavour"></favours>   `,   directives: [favour_component] }) export class appcomponent {  post={   title:"title",   isfavour:true } } 

favour.component.ts

import { component, input} '@angular/core'; @component({ selector: 'favours', template: `         <i          class="glyphicon"         [class.glyphicon-star-empty]="!favour"[class.glyphicon-star]="favour" (click)="onclick()">         </i> ` }) export class favour_component {  @input() isfavour=false; onclick(){ this.isfavour=!this.isfavour; } } 

its simple tutorial sof mark favourite question (star) . screenshot coding.

i search on sof, have similar error scenario totally different, cant understand coding @ all. hence post here.

since rc5 if wanted use directive or pipe or other component on view, should declared in appmodule(ngmodule) declaration property

@ngmodule({   imports:      [ browsermodule ],   declarations: [ appcomponent, favour_component ], //pipes, components, directives belongs here   bootstrap:    [ appcomponent ] })  export class appmodule { }  

thereafter had mistake in template binding change favour isfavour

@component({   selector: 'favours',   template: `       <i class="glyphicon"          [class.glyphicon-star-empty]="!isfavour"           [class.glyphicon-star]="isfavour"           (click)="onclick()">{{isfavour}}       </i>     ` }) export class favour_component {    //....  } 

here plunkr in action