Using Pipe operator || on the template causes error

[zepelega]

🐞 bug report

Is this a regression?

Yes, the previous version that I had installed in which this bug was not present was: "ngx-mask": "^18.0.0",

Description

When using the ||(OR) operator this error is thrown and noting is displayed.

phone: string = '9999999999'

{{ phone | mask: '(00) 0000-0000||(00) 0.0000-0000' }}

A single mask work fine, as expected.

{{ phone | mask: '(00) 0000-0000' }}

🔥 Exception or Error

ERROR RuntimeError: NG0600: Writing to signals is not allowed in a `computed`.
    at ClienteListarComponent_Conditional_27_Defer_0_td_11_Template (listar.component.html:90:41)

🌍 Your Environment

"ngx-mask": "^19.0.6"

Angular Version:

Angular CLI: 19.0.6
Node: 20.13.1
Package Manager: npm 10.8.0
OS: win32 x64

Angular: 19.0.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router     

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1900.6
@angular-devkit/build-angular     19.0.6
@angular-devkit/core              19.0.6
@angular-devkit/schematics        19.0.6
@angular/cdk                      19.0.4
@angular/cli                      19.0.6
@angular/material                 19.0.4
@angular/material-luxon-adapter   19.0.4
@schematics/angular               19.0.6
rxjs                              7.8.1
typescript                        5.6.3
zone.js                           0.15.0

[Lorena301]

Hi, I have the same issue after updating to version 19. Have you been able to solve it?

[DanielNovaesDias]

It seems commit #1467 broke the pipe, Idk the specifics or how angular works internally, but I assume angular is treating 'transform' as a computed signal, and writing to signals inside it is disallowed. Don't know how I would keep this as a signal without breaking it, could we revert this in the mean time?

also, according to this issue: angular/angular#56401, there isn't a benefit to using signals inside pure pipes, as they won't be re-evaluated.

As a temporary fix, i'm using the service to apply the mask in the TS file.

 maskService = inject(NgxMaskService);

  maskedCellphone = computed(() => {
    if (!this.unidadeInfo().Telefone) return '';

    return this.maskService.applyMask(
      this.unidadeInfo().Telefone,
      '(00) 0000-0000||(00) 00000-0000',
    );
  });