I am facing this weird issue with Angular directive for some reason which I could not figure out. I created a new Angular app, (cli v16.2.14). Where I have created two directives one that is described in this Angular tutorial and that works just fine. Now I have created another directive and put the same functionality as the previous one and performed everything as it is like the first one but this time it complains. Which I found weird. Below are my code sample –

Directive HighlightDirective :

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

@Directive({
  standalone: true,
  selector: '[appHighlight]'
})

export class HighlightDirective {

  constructor(private el: ElementRef) {}

  @Input() appHighlight = '';
  
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.appHighlight || 'red');
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight('');
  }
  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Directive SetBgColorDirective :

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

@Directive({
  standalone: true,
  selector: '[appSetBgColor]'
})

export class SetBgColorDirective {

  constructor(private el: ElementRef) {}

   @Input() appBgColor = '';

   @HostListener('click') onSingleClick() {
    this.highlight(this.appBgColor || 'red');
  }
  @HostListener('dblclick') onDoubleClick() {
    this.highlight('');
  }
  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

Both are almost the same code with only different events and with a different @Input property name.

In the app.module.ts

import { HighlightDirective } from './highlight.directive';
import { SetBgColorDirective } from './set-bg-color.directive';

  imports: [
    HighlightDirective,
    SetBgColorDirective
  ]

In the app.component.ts :

And eventually:

<div class="a">
  <div>
    <h2 [appHighlight]="color">Hello</h2>
  </div>
  <div>
    <p [appSetBgColor]="color">Hello world</p>
  </div>
</div>

This immediately complaints that Error: src/app/app.component.html:6:8 - error NG8002: Can't bind to 'appSetBgColor' since it isn't a known property of 'p'.

However appHighlight works just fine in all the places. I tried all the thinkable “permutation and combination” to make this work. Everything works just fine with appHighlight but never with appSetBgColor.

I even try deleting the first one but still the error persisted.

P.S.

A simple directive like the below one works fine but not with the @Input

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

@Directive({
  standalone: true,
  selector: '[appSetBgColor]'
})

export class SetBgColorDirective {

  constructor(private el: ElementRef) {
    this.el.nativeElement.style.backgroundColor = 'pink';
  }
}