Component- DataBinding

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

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

parent component.ts

componentElements = [{type: 'example', name: 'Testexample', content: 'Just a test!'}];

parent component.html

<app-component-element

*ngFor="let componentElement of componentElements"

[customPropertyName]="componentElement"></app-component-element>

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

component.ts

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

@Input('customPropertyName') element : {type: string, name: string, content: string};

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

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

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

component.html

<div class="panel panel-default">

<div class="panel-heading">{{ element.name }}</div>

<div class="panel-body">

<p>

<strong *ngIf="element.type === 'example'" style="color: red">{{ element.content }}</strong>

</p>

</div>

</div>

응용한 예제 보기

API 보기 (블로그, 원본)