Angular 2 - how to handle change detection in a directive

Question

I've got an input field that I have attached a directive to.

<input type="email" 
       id="email" 
       formControlName="email" 
       email
       [placeholder]>

The directive is placeholder, when a user updates the input with a new value I want to run some code in the directive:

  @Input() public input: String;

  constructor(private el: ElementRef) {}

  @HostListener('change') ngOnChanges() {
    console.log('test');
  }

I thought I'd need to use the hostListener directive to check for a change but this isn't working as I intended. My intention is to add a class when the input has a value inside of it.

What do others do to achieve this?

*isn't working as I intended* - and how did you intend? The question lacks clear problem statement. Since you set up a listener on `change` event, you can be sure that it will be triggered on this event. — Estus Flask, Feb 13 '18 at 17:26
Thanks good point. I've just added to my question of my intent. — MaxwellLynn, Feb 13 '18 at 17:31
Related question, https://stackoverflow.com/questions/17047497/what-is-the-difference-between-change-and-input-event-for-an-input-element — Estus Flask, Feb 13 '18 at 17:44
The event you're likely looking for is `input`, not `change`. — Estus Flask, Feb 14 '18 at 09:14

score 1 · Accepted Answer · answered Feb 13 '18 at 18:49

Use Template Driven Form and Define input property binding as below in your template

 <input type="email" 
    id="email" 
    [(ngModel)]="email"
    [input]="email"  
    placeholder>

Directive.ts

     @Input() public input: String;
     constructor(private el: ElementRef) {}
     @HostListener('change') ngOnChanges() {
      console.log('test');
       }

it might help and also check this example https://stackblitz.com/edit/angular-na4ncb?file=app%2Fapp.component.html

score 0 · Answer 2 · answered Sep 11 '19 at 17:44

You can use de OnChange

@Directive({
   selector: '[my-directive]'
})
export class MyDirective implements OnChanges {
   @Input('value-listen') public formControl: any;

   ngOnChanges(changes: SimpleChanges){
     console.log(changes);
   }

}

Only should pass the formControl in [value-listen]="yourValue"

Angular 2 - how to handle change detection in a directive

2 Answers2