gosulove gosulove - 3 months ago 34
AngularJS Question

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

I am new to AG2.Just started for 1 day. I tried some online tutorial and follow their coding exactly but get error.

directives: [favour_component] // only this line of coding is marked RED


Then from the chrome console, the error is

Unhandled Promise rejection: Template parse errors:Can't bind to 'isfavour' since it isn't a known property of 'favours'.


May I know whats wrong with my coding?

app.component.ts

import { Component } from '@angular/core';
import {favour_component} from './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} from '@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 a very simple tutorial just like SOF mark as favourite question (star) . The screenshot is their coding.

enter image description here

I search on SOF, they have some similar error but the scenario is totally different, i cant understand their coding at all. Hence i post it here.

Answer

Since rc5 if you wanted to use any directive or pipe or other component on view, it should be declared in AppModule(NgModule) declaration property

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, favour_component ], //Pipes, Components, Directives belongs here
  bootstrap:    [ AppComponent ]
})

export class AppModule { } 

Thereafter you had a mistake in your template binding change favour to 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 is Plunkr in action