Using replace in Angular directive

Question

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

@Directive({
  selector: '[mpnAadharDirective]'
})
export class GeneralDirective {

  constructor(private el: ElementRef) { }

  @HostListener('keyup') keyup() {
    console.log(this.el.nativeElement.value.replace(/\d(?=\d{4})/g, "*"))
  }
}

With the above code I'm trying to replace the nativeElement value, but I get the value printed but it is not replacing. I need some help in fixing this. Thank you.

the replace: true flag had come up with more problems than solutions which is why it was removed. therefore you can not build directives in such a way anymore and provide valid html markup. The only workaround is to use an attribute-directive instead: — nircraft
– nircraft, Commented Jun 6, 2019 at 12:37

youri · Accepted Answer · 2019-06-06 12:58:57Z

2

Replacing event target value should works:

@HostListener('keyup', ['$event']) keyup(event) {
  event.target['value'] = this.el.nativeElement.value.replace(/\d(?=\d{4})/g, "*");
}

answered Jun 6, 2019 at 12:58

youri

1,1608 silver badges19 bronze badges

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

3 Comments

PremKumar Over a year ago

Thank you. When I console this out, it's only printing the values I type and not replacing. That's the issue.

youri Over a year ago

I'm not sure about your problem, this is a small Stackblitz example, it seems to work.

PremKumar Over a year ago

Wow, thanks. I had some issue with ngx mask which was interfering.

Collectives™ on Stack Overflow

Using replace in Angular directive

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related