[Angular] Custom Pipe 만들어 적용하기 (with. ngStyle)

안녕하세요 Foma 입니다!

 

저번 시간에는 Angular 자체에 내장되어 있는 Built-in Pipe에 대해서 알아 보았는데요.

 

(아직 안보신 분들은 여기 에서 봐주세요!)

 

이번에는 직접 Custom Pipe를 만들어서 적용해 보는 방법에 대해 정리해 보겠습니다.

---

Pipe 생성

 

아래 명령어로 Pipe를 만들어 줍니다.

 

ng g p 파이프이름

//만약 테스트 파일 없이 만들고 싶다면
ng g p --skip-tests=true 파이프이름

 

저는 평균 값에 따라서 다른 색이 보이도록 하는 AverageColorPipe를 만들어 보겠습니다.

 

 

아래와 같이 pipe.ts 파일이 만들어 질거에요.

 

@Pipe({})를 통해서 '|' 기호 뒤에 사용할 수 있는 pipe 이름을 정해 줍니다.

 

그리곤 transform 메서드 안에 원하는 방식으로 값이 나오게 코드를 작성해 줍니다.

 

저는 average보다 작으면 'red' 같으면 'blue' 크면 'green'이 나오도록 해줬습니다.

 

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

@Pipe({
  name: 'averageColor'
})
export class AverageColorPipe implements PipeTransform {
  transform(value: number, average: number): string {
    if (value < average) return 'red';
    if (value == average) return 'blue';
    return 'green';
  }
}

---

app.module.ts

 

Pipe를 명령어로 만들면 app 모듈에 자동으로 추가 되지만 혹시 안되시는 분들을 위해 정리 합니다.

 

생성해준  pipe를 import 해주시고 @NgModule의 declarations에 해당 Pipe를 추가해 줍니다.

 

...
import { AverageColorPipe } from './average-color.pipe';

@NgModule({
  declarations: [AppComponent, AverageColorPipe],
 	...
})
export class AppModule {}

---

app.component.ts

 

component엔 숫자들이 들어있는 배열과 해당 배열의 총 합의 평균을 구해 주도록 하겠습니다.

 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  average: number = 0;
  numbers: number[] = [1, 2, 3, 4, 5, 6, 7];

  ngOnInit(): void {
    this.average =
      this.numbers.reduce((acc, curr) => {
        return acc + curr;
      }) / this.numbers.length;
  }
}

---

app.component.html

 

이제 앞에서 생성해준 averageColor파이프를 이용하여 숫자의 값에 따라 글자 색이 바뀌도록 하는 코드를 작성해 보겠습니다.

 

숫자 | averageColor:평균값을 넣어주시고 ngStyle을 이용하여 color 색을 pipe의 return 값이 되도록 합니다.

 

<div *ngFor="let number of numbers">
  <h1 [ngStyle]="{ color: (number | averageColor: average) }">
    {{ number }}
  </h1>
</div>

 

이렇게 하면 평균값보다 작은 숫자는 빨간색으로 같은 값은 파란색으로 큰 값은 초록색으로 나타나는 것을 볼 수 있습니다!