CODEWITHSUNDEEP
angularangularjs-directive
gosulove
gosulove

Reputation: 1645

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.

Upvotes: 0

Views: 115

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

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

Upvotes: 1

Related Questions