Angular2 - Detect Changes of Attribute @Input

Question

I have a simple Attribute Directive mask, with an @Input() mask:string

I want to be able to detect and react to changes on the mask binding I can use ngOnChanges somehow, but I feel like this is like painting the problem with a large brush

Sample/Simplified code of directive:

@Directive({
  selector: 'mask'
})
export class MaskDirective implements AfterViewInit {
  @Input() mask: string;

  constructor(public el: ElementRef) {};

  ngAfterViewInit() {
    $(this.el.nativeElement).mask(this.mask);
  }
}

Usage:

<input type='text' [mask]='someBinding'>

When the value of someBinding changes, how to execute some code, without relying on ngChanges ?

Olivier Clément · Accepted Answer · 2016-03-09 15:11:01Z

4

You can use setter method for mask property instead of more broad ngOnChanges:

@Directive({
  selector: 'mask'
})
export class MaskDirective implements AfterViewInit {
  @Input set mask(newValue: string) {
    $(this.el.nativeElement).mask(newValue);
  }

  constructor(public el: ElementRef) {};


}

Setter is going to be more efficient as it's related to only this property.

edited Mar 9, 2016 at 15:11

Olivier Clément

7641 gold badge9 silver badges27 bronze badges

answered Mar 8, 2016 at 23:03

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Olivier Clément Over a year ago

Thanks for your reply; It'd be great if it'd work but then I get a duplicate identifier 'mask' error. Did you actually managed to do this so it works or? Ideas?

Olivier Clément Over a year ago

Never mind that - Your solution works, except you need to decorate the setter itself with the @Input decorator I sent an edit with the fix Thanks!

Collectives™ on Stack Overflow

Angular2 - Detect Changes of Attribute @Input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related