🚀 - Allow null in Angular directive

[evantrimboli]

Which package(s) are relevant/related to the feature request?

No response

Description

Using Angular, I have a wrapped control where I want to be able to optionally pass Maskito options:

@Input() maskito: MaskitoOptions | null = null;

With the way the Angular directive is created, I'm not able to pass null as a value, so I need to use an ngIf to include the directive which is kind of ugly. It would be nice if null was a possibility and the masking would just bail early, something like:

async ngOnChanges(): Promise<void> {
    this.maskedElement?.destroy();

    if (!this.maskito) {
        return;
    }

    const predicate = this.maskitoElement;
    const predicateResult = await predicate(this.elementRef.nativeElement);

    if (this.maskitoElement !== predicate) {
        // Ignore the result of the predicate if the
        // maskito element has changed before the predicate was resolved.
        return;
    }

    this.ngZone.runOutsideAngular(() => {
        this.maskedElement = new Maskito(predicateResult, this.maskito);
    });
}

[waterplea]

Bailing early leaves previous mask. Maybe we can fallback to empty mask in case of null internally, that would probably improve DX.

[evantrimboli]

Ideally I don't want to have the overhead of spinning up all the masking stuff if the config is null. I had a brief look through the code and it seems like there's no early exiting if the mask is equal to the default options, but I may have missed it. Anyway, not sure of the best way to accomplish it, but would like to be able to configure it dynamically without having to run the default mask options when they aren't needed.

[waterplea]

The overhead is minuscule and wouldn't matter unless you spin hundreds of masks every seconds which would bottleneck at DOM creation of input tags anyway.