Angular에서 파이프를 사용한 숫자 형식 지정

DecimalPipe 파이프를 사용하여 숫자를 형식 지정할 수 있습니다. 파이프의 첫 번째 매개변수에는 정수 부분의 최소 자릿수를 전달합니다. 두 번째 매개변수에는 소수 부분의 최소 자릿수를 지정합니다. 세 번째 선택적 매개변수에는 소수 부분의 최대 자릿수를 설정합니다.

파이프 이름이 DecimalPipe임에도 불구하고, 호출할 때는 다음과 같이 작성합니다: number.

실제로 사용해 봅시다. 컴포넌트 클래스에 다음 숫자를 설정합니다:

app/app.component.tsexport class AppComponent {
  num: number = 18;
}

예제

정수 부분이 두 자리 숫자가 되도록 출력해 봅시다. 이때 소수 부분의 최소 자릿수는 1이 되도록 합니다:

app/app.component.html<div>{{ num | number:'2.1' }}</div>

코드 실행 결과:

html<div>18.0</div>

예제

이제 소수 부분에 두 자리 숫자가 표시되도록 설정해 봅시다:

app/app.component.html<div>{{ num | number:'2.2' }}</div>

코드 실행 결과:

html<div>18.00</div>

예제

새로운 숫자를 설정해 봅시다:

app/app.component.tsexport class AppComponent {
  num: number = 18.67899;
}

HTML 템플릿에서 소수 부분에 최대 두 자리 숫자만 표시되도록 출력해 봅시다:

app/app.component.html<div>{{ num | number:'2.1-2' }}</div>

코드 실행 결과:

html<div>18.68</div>

예제

이제 정수 부분이 세 자리 숫자가 되도록 형식을 지정하고, 소수 부분에는 다섯 자리 숫자가 표시되도록 해 봅시다:

app/app.component.html<div>{{ num | number:'3.5-6' }}</div>

코드 실행 결과:

html<div>018.67899</div>

예제

소수 부분의 최소 자릿수를 숫자에 설정된 자릿수보다 많게 지정해 봅시다. 이 경우 여섯 자리 숫자를 출력합니다:

app/app.component.html<div>{{ num | number:'3.6-8' }}</div>

코드 실행 결과를 보면, DecimalPipe 파이프가 소수 부분에 0을 추가한 것을 확인할 수 있습니다:

html<div>018.678990</div>

실습 문제

typescriptnum: number = 15;

typescript'015.000'

typescriptnum: number = 12.345;

typescript'0012.345'

typescriptnum: number = 12.345;

typescript'12.3'

typescriptnum: number = 12.345;

typescript'012.34500'

typescriptnum: number = -7.261;

typescript'-007.3'

typescriptnum: number = 100.261923;

typescript'100.9226130'

typescriptnum: number = 100.926613;

typescript'0100.93'