`mask` Directive behave differently between V14.2.4 and V15.2.1 when masking `null` value in `ng-template` with `ngTemplateOutletContext`

[klipnot]

🐞 bug report

Is this a regression?

Probably yes, the previous version in which this bug was not present was: 14.2.4

Description

When using mask directive in a ng-template with ngTemplateOutletContext value that can be set to null or undefined was skipped by the mask directive nothing happened and no errors was triggered which was "good"

Now the value is treated as a string type value, the mask is applied on null string.

🔬 Minimal Reproduction

14.2.4 Version in this stackblitz

<ng-container
  *ngTemplateOutlet="myTemplate; context: { val1: null, val2: null }"
>
</ng-container>
<ng-template #myTemplate let-val1="val1" , let-val2="val2">
  <span
    >Part 1:
    <pre>{{ val1 | mask: [firstCustom, MASK_PATTERN] }}</pre>
  </span>
  <span
    >Part 2:
    <pre>{{ val2 | mask: [secondCustomMask, MASK_PATTERN] }}</pre>
  </span>
</ng-template>

15.2.1 Version in this stackblitz

<ng-container
  *ngTemplateOutlet="myTemplate; context: { val1: null, val2: null }"
>
</ng-container>
<ng-template #myTemplate let-val1="val1" , let-val2="val2">
  <span
    >Part 1:
    <pre>{{ val1 | mask: firstCustom }}</pre>
  </span>
  <span
    >Part 2:
    <pre>{{ val2 | mask: secondCustomMask }}</pre>
  </span>
</ng-template>

🔥 Exception or Error

No errors throw, just a different behavior.

🌍 Your Environment

Angular Version: Before

Angular CLI: 14.2.10
Node: 16.20.2
Package Manager: npm 8.19.4 
OS: darwin arm64

Angular: 14.2.12
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.10
@angular-devkit/build-angular   14.2.10
@angular-devkit/core            13.3.9
@angular-devkit/schematics      13.3.9
@angular/cdk                    14.2.7
@angular/cli                    14.2.10
@schematics/angular             14.2.10
rxjs                            6.6.7
typescript                      4.6.4

Now

Angular CLI: 15.2.10
Node: 16.20.2
Package Manager: npm 8.19.4
OS: darwin arm64

Angular: 15.2.10
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.10
@angular-devkit/build-angular   15.2.10
@angular-devkit/core            13.3.9
@angular-devkit/schematics      13.3.9
@angular/cdk                    15.2.9
@schematics/angular             15.2.10
rxjs                            6.6.7
typescript                      4.8.4

Anything else relevant?

I firstly supposed that values given through ngTemplateOutletContext as been converted to string value but it seems to not be the case.

[klipnot]

Can anyone has any idea please ? 🤔

[andriikamaldinov1]

@varadero Thanks for using Ngx-Mask. Please update to latest version. It example all work as expected - https://stackblitz.com/edit/angular-vwdi3b?file=src%2Fmain.ts

[klipnot]

@andriikamaldinov1 So what you propose me is to update to the next version of Angular ?

Unfortunately I can't upgrade to Angular 16 for now I was already updating from 14 to 15.

[klipnot]

If anyone has this issue and same constraint (unable to migrate to Angular 16)

Following what I found in this issue I've implemented a new wrapper pipe.

"ngx-mask": "15.2.1",

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  providers: [
    provideNgxMask(),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Pipe, PipeTransform } from '@angular/core';
import { NgxMaskService } from 'ngx-mask';
/*
 * I have to create this mask in order to workaround this Issue https://github.com/JsDaddy/ngx-mask/issues/1258
 * Where `null` values are masked by ngx-mask when used on template ref
 *
 * */
@Pipe({
  name: 'maskA15WorkAroundWrapper',
})
export class MaskWrapperPipe implements PipeTransform {
  constructor(private maskService: NgxMaskService) {}

  transform(value: string | number, mask: string): string {
    return this.maskService.applyMask(value?.toString(), mask);
  }
}