Angular 튜토리얼: 파이프와 탭 메서드

파이프

파이프는 데이터를 다른 형식으로 변환하는 함수와 같습니다. 예를 들어, 날짜를 문자열로 변환하거나 숫자에 통화 형식을 적용하는 데 사용할 수 있습니다.

Angular에는 다양한 기본 파이프가 제공됩니다.

• date: 날짜를 원하는 형식으로 변환합니다.
• currency: 숫자를 통화 형식으로 변환합니다.
• lowercase: 문자열을 소문자로 변환합니다.

사용자 정의 파이프를 만들 수도 있습니다.

예시:

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

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    // 파이프 로직을 여기에 작성합니다.
    return value;
  }
}

템플릿에서 파이프를 사용하려면 | 연산자를 사용합니다.

{{ date | date:'yyyy-MM-dd' }}
{{ price | currency:'₩' }}
{{ name | lowercase }}

탭 메서드

탭 메서드는 템플릿에서 반복 가능한 데이터를 표시하는 데 사용됩니다.

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

*ngFor 지시문은 items 배열의 각 항목에 대해 li 요소를 반복합니다.

탭 메서드는 데이터를 필터링, 정렬, 그룹화하는 데 사용할 수도 있습니다.

<ul>
  <li *ngFor="let item of items | filter:'active'">{{ item }}</li>
</ul>

filter 파이프는 active 속성이 true인 항목만 표시합니다.

추가 정보

예제 코드

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {

  items = [
    { name: 'John', age: 30 },
    { name: 'Mary', age: 25 },
    { name: 'Bob', age: 40 },
  ];

}

<h1>Angular 파이프와 탭 메서드 예제</h1>

<ul>
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

<ul>
  <li *ngFor="let item of items | filter:'John'">{{ item.name }}</li>
</ul>

<ul>
  <li *ngFor="let item of items | filter:'John' | orderBy:'age'">{{ item.name }}</li>
</ul>

설명:

• 첫 번째 ul 요소는 items 배열의 모든 항목을 표시합니다.
• 두 번째 ul 요소는 John이라는 이름을 가진 항목만 표시합니다.

이 예제는 파이프와 탭 메서드를 사용하여 데이터를 표시하는 방법을 보여줍니다.

추가 예제

• 날짜 형식 지정:

{{ date | date:'yyyy-MM-dd' }}

• 숫자에 통화 형식 적용:

{{ price | currency:'₩' }}

• 문자열을 소문자로 변환:

{{ name | lowercase }}

{{ name | uppercase }}

자습서

파이프와 탭 메서드 대체 방법

템플릿 문법

템플릿 문법을 사용하여 데이터를 직접 표시할 수 있습니다.

<h1>{{ title }}</h1>

<p>{{ description }}</p>

컴포넌트 속성

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {

  title = 'Angular 앱';
  description = 'Angular 앱에 대한 간단한 설명입니다.';

}

<h1>{{ title }}</h1>

<p>{{ description }}</p>

데이터 바인딩

데이터 바인딩을 사용하여 컴포넌트 속성과 템플릿 요소를 연결할 수 있습니다.

<h1>{{ title }}</h1>

<p [innerHTML]="description"></p>

서비스

서비스를 사용하여 데이터를 컴포넌트에 가져올 수 있습니다.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  getData() {
    return [
      { name: 'John', age: 30 },
      { name: 'Mary', age: 25 },
      { name: 'Bob', age: 40 },
    ];
  }

}

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {

  items: any[];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.items = this.dataService.getData();
  }

}

<h1>Angular 앱</h1>

<ul>
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

결론