Angular – Directive – How to fix: Can’t bind to since it isn’t a known property of

How to reproduce it

directive.ts

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[directiveDemo]'
})
export class DemoDirective {

  constructor() { }

  ngOnInit() {
    console.log(this.directiveDemo)
  }

}

component.html

<div [directiveDemo]="'Directive value'">Directive 1</div>

Solution #1

Add @Input decorator.

directive.ts

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[directiveDemo]'
})
export class DemoDirective {

  @Input() directiveDemo = "";

  constructor() { }

  ngOnInit() {
    console.log(this.directiveDemo)
  }

}

Solution #2

Add @Input decorator and remove brackets [] from the template.

directive.ts

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[directiveDemo]'
})
export class DemoDirective {

  @Input() directiveDemo = "";

  constructor() { }

  ngOnInit() {
    console.log(this.directiveDemo)
  }

}

component.html

<div directiveDemo="Directive value">Directive 1</div>

• Share on Facebook