Typescript Angular 넘버 포멧 pipe 생성 예시

ng generate pipe numberFormat --skip-import

1. CLI : pipe 생성

 

 

2. 생성 완료

 

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

@Pipe({
  name: 'numberFormat',
  standalone: true,
})
export class NumberFormatPipe implements PipeTransform {
  transform(value: string | number, args: string): string {
    return value.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
  }
}

3. standalone true

4. 숫자 콤마처리 

 

 

import { NumberFormatPipe } from 'src/app/pipes/number-format.pipe';

 imports: [NumberFormatPipe]

5. 사용할 곳에서 로드하기

 

 

{{item.totalPrice | numberFormat : ''}}

6. 템플릿 호출 예시