[ Angular 2 : Lifecycle Hook ] 라이프 사이클

실행순서 ngOnChanges ngOnInit ngDoCheck ngAfterContentInit ngAfterContentChecked ngAfterViewInit ngAfterViewChecked 각 라이프 사이클 설명 1. ngOnChanges Data-bound Property 값이 변할 때. 2. ngOnInit ngOnChanges가 처음 실행되고 나서, 컴포넌트가 시작될 때. ( ngOnChanges 가 Data-bound Property 값이 변경될 때마다 실행되는 반면, ngOnInit는 첫번째 ngOnChanges 실행 이후 단 한번만 실행된다. ) 3. ngDoCheck Angular 2 Change Detection Cycle 이 …

[ Angular 2 : Databinding ] 데이타 바인딩 컨셉

Databinding 은 커뮤니케이션을 의미한다. Component Body/Logic 과 Component Template(View) 사이에 데이타와 이벤트에 대한 정보를 주고 받도록 하는 것이 Databinding이다. String Interpolation →       {{ Expression resolving to a string }} Property Binding →       <button [disabled]=”expression resolving to required value type”> Event Binding →       <button (click)=”expression handling the event”> Two-way Binding →   …

[ Angular 2 : ng-content ] selector 사이에 내용 삽입

ng-content 를 사용하여 selector 사이에 내용을 삽입할 수 있다. 예를 들면 아래와 같다. app.component.ts import { Component } from ‘@angular/core’; @Component({ selector: ‘app-root’, template: ` <h1>Hello World!</h1> <app-other>Some Text</app-other> `, styles: [` h1 { color:red; } `] }) export class AppComponent { ….. ….. …. other.component.ts import { Component } from ‘@angular/core’; @Component({ selector: ‘app-other’, …