Apply mask to an HTML table column with Angular?

Question

How to put CPF mask in a table ? For inputs I used the ui-Cpf-Mask directive, but need to put in a table cell.

code:

 <tr *ngFor="let user of users | async">
            <td>{{user.nome}}</td>
            <td>{{user.cpf}}</td>
 </tr>

Imagery

Answer 1

Create a PIPE via command CLI Angular:

ng g pipe CPF

after this command will be created a file with the name of cpf.pipe.ts that its value (value) with a regular expression can create the CPF mask of the as follows:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'CPF'
})
export class CPFPipe implements PipeTransform {
  transform(value: string, ...args: any[]): any {
    if (value.length === 11) {
      return value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g, '\$1.\$2.\$3\-\$4');
    }
    return 'error';
  }
}

To use this pipe must be registered on app.module.ts in the array declarations, example:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CPFPipe } from './cpf.pipe';

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

After this setting just use

{{ numero_cpf | CPF }}

^References

• generate pipe
• pipe
• Custom Pipes

Answer 2

Create or use a pipe like this https://github.com/mariohmol/ng-brazil:

 <tr *ngFor="let user of users | async">
            <td>{{user.nome}}</td>
            <td>{{user.cpf  | cpf}}</td>
 </tr>

Answer 3

If you don’t like adding too much dependency on the project, you can use Cpf pipe of ng-Brazil, install the js-brasil only (npm i js-brasil) and create the pipe just for your project (ng g pipe cpf) - this while the ng-brazil not allow importing only this pipe, at least:

import { Pipe, PipeTransform } from '@angular/core';
import { maskBr } from 'js-brasil';

@Pipe({
  name: 'cpf',
})
export class CpfPipe implements PipeTransform {
  transform(cpfValue: any): string {
    return maskBr.cpf(cpfValue);
  }
}

Note: remember to import the pipe in the module you need.

Note. 2: this generates a Warning:

WARNING in app\shared\pipes\cpf.pipe.ts depends on 'js-brasil'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies