Angular Extend Directive with @Inputs

Question

I'm trying to extend a MaskDirective from ngx-mask (https://www.npmjs.com/package/ngx-mask).

My goal is to replace the functionality of <input mask="(000) 000-0000" with <input myCustomPhoneNumber> So that all phone numbers in my application follow the same format, with less risk of a typo.

I've tried extending MaskDirective but can't get the behavior correct. Here is what I have.

@Directive({
    selector: '[myCustomPhoneNumber]',
    providers: [
        MaskService
    ]
})
export class PhoneNumberDirective extends MaskDirective {

    constructor(private elRef: ElementRef,
                private renderer: Renderer2,
                private maskService: MaskService) {
        super(elRef, maskService);
        this.maskExpression = '(000) 000-0000';
    }

}

The this.maskExpression property is what I believe what controls the parent directive, but it does not seem to take my value I have set it to.

I have also tried change the maskExpression to

@Input('myCustomPhoneNumber')
maskExpression: string = '(000) 000-0000';

this works when the template looks like <input myCustomPhoneNumber="(000) 000-0000"> but not when <input myCustomPhoneNumber>

This is where I'm stuck. Any help is appreciated.

Angular Extend Directive with @Inputs

0 Answers0