단계별: Angular에서 맞춤형 파이프 생성

Angular 파이프는 데이터를 입력으로 가져와 원하는 출력으로 변환합니다. 예를 들어, 보간을 사용하면 제품 이름을 표시합니다. 이제 제품 이름이 항상 대문자로 표시되기를 원합니다. 파이프 대문자 Angular 사용하여 이 작업을 수행할 수 있습니다.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
}

위의 구성 요소에서 productName은 대문자로 표시됩니다. 따라서 파이프는 입력을 받아 아래와 같이 원하는 출력으로 변환합니다.

Angular 라이브러리는 다음과 같은 많은 내장 파이프를 제공합니다.

• UpperCasePipe
• LowerCasePipe
• 커런시파이프(CurrencyPipe)
• PercentPipe
• DatePipe etc.

내장된 통화 파이프를 어떻게 사용할 수 있는지 살펴보겠습니다.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}} = {{productPrice | currency}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
    productPrice = 990;
}

콜론을 사용하여 파이프에 매개변수를 전달할 수도 있습니다. 아래와 같이 통화 파이프에 입력을 전달할 수 있습니다.

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `{{productName | uppercase}} = {{productPrice | currency:'CAD':'symbol-narrow':'4.2-2'}}`
})
export class AppComponent {
    productName = 'Cricket Bat';
    productPrice = 990;
}

Angular 많은 기본 파이프를 제공하더라도 사용자 정의 파이프를 만들 때 요구 사항이 있을 수 있습니다. 사용자 정의 파이프를 만드는 것은 함수를 만드는 것만큼 간단합니다.  문자열에 있는 각 단어의 첫 글자를 대문자로 표시하는 파이프를 만들고 싶다고 가정해 보겠습니다.

Consider below component,

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
  <ul *ngFor='let n of names'>
   <li>{{n.name}}</li>
  </ul>
  `
})
export class AppComponent {
 
    names = [];
    constructor() {
        this.names = this.getNames();
    }
    getNames() {
        return [
            { 'name': 'dhananjay Kumar' },
            { 'name': 'jason beres' },
            { 'name': 'adam jafe' }
        ];
    }
}

이 구성 요소는 아래와 같이 이름을 인쇄합니다.

이제 이름에 있는 각 단어의 첫 글자를 대문자로 표시하려고 합니다. 그러기 위해서는 사용자 정의 파이프를 작성해야 합니다.  파이프를 생성하려면 다음 단계를 따라야 합니다.

1. Create a class
2. 클래스에서 PipeTransform을 구현합니다.
3. Implement transform function

따라서 아래 목록과 같이 첫 번째 문자를 대문자로 표시하는 파이프를 만들 수 있습니다.

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({ name: 'firstcharcateruppercase' })
export class FirstCharacterUpperCase implements PipeTransform {
    transform(value: string, args: string[]): any {
        if (!value) {
            return value;
        }
        return value.replace(/\w\S*/g, function (str) {
            return str.charAt(0).toUpperCase() + str.substr(1).toLowerCase();
        });
    }
}

보시다시피 사용자 정의 파이프는 입력 매개 변수를 가져 와서 일부 값을 반환하는 함수 일 뿐입니다. 변환 메서드 내부에 파이프의 모든 논리를 작성해야 합니다.

​firstcharacteruppercase 파이프를 사용하려면 먼저 아래와 같이 모듈에서 선언해야 합니다.

import { FirstCharacterUpperCase } from './firstcharacteruppercase.pipe'
 
@NgModule({
    declarations: [
        AppComponent, FirstCharacterUpperCase
    ],

다음으로 구성 요소에서 아래와 같이 사용할 수 있습니다.

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `
  <ul *ngFor='let n of names'>
   <li>{{n.name | firstcharcateruppercase}}</li>
  </ul>
  `
})
export class AppComponent {
 
    names = [];
    constructor() {
        this.names = this.getNames();
    }
    getNames() {
        return [
            { 'name': 'dhananjay Kumar' },
            { 'name': 'jason beres' },
            { 'name': 'adam jafe' }
        ];
    }
}

이제 각 이름의 첫 번째 문자가 대문자로 출력됩니다.

To summarize:

1. 맞춤형 파이프는 @Pipe로 장식된 클래스입니다.
2. 데코레이터의 Name 속성@Pipe 파이프의 이름을 정의합니다.
3. Pipe 클래스는 PipeTransform 인터페이스를 구현해야 합니다.

변환 메서드 내에서 파이프 비즈니스 논리를 구현해야합니다.

파이프에는 두 가지 유형이 있습니다

1. 상태 비저장 파이프
2. 상태 저장 파이프

위에서 사용하고 만든 것은 상태 비저장 파이프입니다. 입력을 받고 변환된 값을 반환하는 순수 함수입니다.

상태 저장 파이프는 구현하기가 복잡하며 변환하는 데이터의 상태를 기억합니다. 일반적으로 HTTP 요청을 생성하고, 응답을 저장하고, 출력을 표시합니다. 내장 비동기 파이프 Angular 상태 저장 파이프의 예입니다. 추가 게시물에서는 사용자 지정 상태 저장 파이프를 만드는 방법을 배웁니다.

Summary

이번 포스팅에서는 Angular의 파이프에 대해 배웠습니다. 파이프는 입력 데이터를 원하는 출력으로 변환합니다. Angular 많은 내장 파이프를 제공합니다. 그러나 사용자 지정 파이프를 작성해야 하는 요구 사항이 있을 수 있습니다. 파이프에는 상태 비저장 파이프와 상태 저장 파이프의 두 가지 유형이 있습니다.

이 게시물이 마음에 드시나요?

그리고 거기에 있습니다! 이 게시물이 마음에 드시면 공유해 주세요. 또한 Infragistics Ignite UI for Angular 구성 요소를 확인하지 않았다면 반드시 확인해 보세요! 그들은 30+ 자료 기반 Angular 구성 요소를 사용하여 빠른 웹 앱을 더 빠르게 코딩할 수 있도록 도와줍니다.