Can't bind to color since it isn't a known property of 'button'

Issue

Error

Can't bind to color since it isn't a known property of 'button'.

Code

@Component({
    selector: "nav-next",
    template: `
    <div class="nav-next-directive">
        <button [color]="color" class="primary" [
        </button>
    </div>`
})

Expected Behaviour

This child directive enabled us in Angular2-RC4 to set colors dynamically from the parent component. Angular2-Final says this is no good. Any ideas?

Solution

After the debut of ngModule, you have to include your Directive into the ngModule declarations array before using it:

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ColorDirective ],
  bootstrap: [ App ]
})
export class AppModule {}

And make sure your Directive selector is of property type too:

@Directive({
  selector: "[color]"
})

Here is the working example, if you change either one of the two things above, you'll get that error: http://plnkr.co/edit/ymUTyuMo9FsSORd9XI2H?p=preview

Answered By - Harry Ninh