0

I need help with Angular directive reload. I have a Angular Directive that not work when my ´format´ attribute was inserted after Directive load: (that Directive work normaly when I insert the attributte directly on html)

// imports here

// example use: <input type="text" id="num" format="***,***,***,**" formControlName="num" class="form-control form-control-sm">

@Directive({
  selector: '[format]'
})
export class FormatNumberDirective implements OnChanges{
    subscription: Subscription;
    @Input('format') valueFormat:any;

    constructor(
        private controlDir: NgControl,
        private renderer: Renderer2,
        private host: ElementRef
    ){}
    
    ngOnInit() {
        this.listenEvents();
    }

    listenEvents(){
        if (this.host != null) {
          this.renderer.listen(this.host.nativeElement, 'blur', (event) => {
            let nbr = this.SFFmtNumber(this.control.value, this.valueFormat);
            this.control.setValue(nbr.toString().trim());
          });
        }
      }

    get control() {
        return this.controlDir.control;
    }

    SFFmtNumber(number, mask)
    {
     // some code to receive number and mask and return formated number.
    }
}

I need to reload Angular format Directive because I insert the ´format´ attribute through mi ts component file. this way:

let numNative = this.el.nativeElement.querySelector('input#num');
this.renderer.setAttribute(numcliNative, 'format', "***,***,***,**9.99");

Important: I don't want insert the attribute directly on html.

Leudis Hernández García
  • 1
  • how I could see. you are using the directive for format the number value? if yes there is one nice package. If you want you can use it, please have a look at the `ngx-mask` -> https://www.npmjs.com/package/ngx-mask and try to find `separator` and `thousandSeparator` – Ashot Aleqsanyan Jul 22 '20 at 20:39
  • I don't like to use extra package to do that, my directive work well inserting format directly on html but the problem is when I insert the attribute through this.renderer.setAttribute(numcliNative, 'format', "***,***,***,**9.99"); – Leudis Hernández García Jul 23 '20 at 12:42
  • If it is possible please create the Stackblitz example. – Ashot Aleqsanyan Jul 23 '20 at 12:56
  • Here is my example: https://stackblitz.com/edit/angular-ivy-svuahs – Leudis Hernández García Jul 23 '20 at 14:29
  • In the first input work well but is because the format attribute was inserted directly, in the second have the format attribute but not work because it's inserted through Renderer2 – Leudis Hernández García Jul 23 '20 at 14:35
  • Ah! I see, But I don't think you can make it work in that way. It is not a simple attribute it is an angular directive. here is the one more question which doesn't have the answer. https://stackoverflow.com/questions/52233757/how-to-assign-angular-directive-to-html-element-by-using-elementref-and-renderer and also here is the one more question which have accepted answer. And the person say it is not possible dynamically. https://stackoverflow.com/questions/39563547/how-to-instantiate-and-apply-directives-programmatically – Ashot Aleqsanyan Jul 23 '20 at 17:25

0 Answers0