Angular에서 파이프를 이용한 문자열 자르기

SlicePipe 파이프 사용법을 배워봅시다. 이 파이프는 문자열을 자를 수 있게 해줍니다. 파이프는 자르기를 시작할 인덱스와 종료할 인덱스를 지정하는 매개변수를 받습니다. 파이프 이름 뒤에 매개변수를 전달하려면 콜론을 붙이고 매개변수를 나열하면 됩니다.

예제를 통해 살펴보겠습니다. 컴포넌트 클래스에 name 프로퍼티를 정의하겠습니다:

export class AppComponent {
	name: string = 'john';
}

이제 SlicePipe 파이프를 사용하여 문자열을 자르고, 시작 인덱스와 종료 인덱스를 지정하겠습니다:

<div>
	{{ name | slice:0:2 }}
</div>

결과는 다음과 같습니다:

<div>
	jo
</div>

11개의 문자를 포함하는 문자열을 생성하세요. 2번째 인덱스부터 4번째 인덱스까지의 부분을 화면에 출력하세요.