GolDeeper

옵션

bindingPropertyName: string

@Component({
  selector: 'bank-account',
  template: `
    Bank Name: {{bankName}}
     Account Id: {{id}}
  `
})
class BankAccount {
  // 이 속성은 바운드된 본래의 이름을 사용합니다.
  @Input() bankName: string;
  // 템플릿에서 이 컴포넌트가 인스턴스화 될 때
  // 이 속성 값은 다른 속성 이름으로 바운드 됩니다.
  @Input('account-id') id: string;
 
  // 이 속성은 바운드되지 않으며, 앵귤러가 자동적으로 업데이트할 수 없습니다.
  normalizedBankName: string;
}
 
@Component({
  selector: 'app',
  template: `
    <bank-account bankName="RBC" account-id="4747"></bank-account>
  `
})
 
class App {}

@Input() - angular/core (컴포넌트 데이터 바인딩)

public으로 외부 컴포넌트에서 접근할 수 있도록 도와주는 데코레이터

html에서는 []를 이용하여 속성으로 접근. 

(component.ts의 데코레이터 변수명(element)에 따라 데코레이터의 패러미터를 달리 할 수 있음.

속성명과 @Input 데코레이터의 변수명이 다를경우: @Input('customPropertyName') element: {}

속성명과 @Input 데코레이터의 변수명이 같은경우: @Input() element: {} 

응용한 예제 보기

API 보기 (블로그, 원본)

모든 어플리케이션은 간단한 작업을로 시작합니다: 데이터를 받고, 변형시키고, 사용자에게 보여주는 기능입니다.

얻은 데이터는 생성하기 간편한 지역변수 이거나 스트리밍하는 복잡한 데이터로 웹 소캣 위 에서 가능합니다.

data가 도착하면, 그 값을 곧바로 view에 직접 toString 값으로  넣을 수 있는데, 드물지만 이러한 작업은 가끔 좋은 UX를 제공하곤합니다.

예를 들자면, 대부분의 사용 방법으로, 

사용자가 날짜를 April 16, 1988과 같은 간단한 양식을 

Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time) 처럼 보길 좋아하지 않습니다.

많은 어플리케이션을 반복적으로 같은 변경을 적용할 경우에 사용할 수 있습니다.
이러한 작업을 스타일처럼  사용할 수 있습니다. 실제로, HTML 템플릿으로 style처럼 사용할 수 있습니다.

앵귤러 pipe를 소개하자면, display-value를 변경시켜 쓰는 방식으로 HTML에 선언하여 사용할 수 있습니다.

live example / download example 으로 실행해 볼 수 있으며, Stackblitz나 download를 할 수 있습니다.

사용 하기

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

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

컴포넌트의 템플릿에 주목해 보겠습니다.

<p>The hero's birthday is {{ birthday | date }}</p>

{{ }} 표현 안쪽을 보면, 컴포넌트의 birthday 값이 pipe 연산자 ( | )를 통해 오른쪽에 있는 Date pipe 함수로 흘러갑니다.

모든 pipe는 이러한 방식으로 작동합니다.

제공하는(built-in) pipe

앵귤러는  DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, 그리고 PercentPipe 와 같은 파이프를 갖고 있습니다.

모두 어떤 템플릿에서든지 사용 가능합니다.