Angular Application은 component를 중심으로 구성되는만큼 component는 Angular의 핵심 개념이다.
Component는 application의 화면을 구성하는 View를 생성하고 관리한다.
Component는 template의 중첩 관계에 의해서 tree 구조를 갖는다. 여러 component 사이의 통신과 상태 관리를 위해서 Service가 있다.
@Compnonent : decorator
Component Metadata
export class
Add Component to app.module.ts
Parent에서 Child로 data 보내는 법 : Property Binding
parent Component는 자신의 template에 Child Component를 담고 있으므로 Child Component를 알 수 있다. 따라서 data를 쉽게 전송할 수 있다.
Parent Component에서 Child의 Property로 값을 전달한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<!--The content below is only a placeholder and can be replaced.-->
<app-hello [hi]="greeting"></app-hello>
`,
styles: []
})
export class AppComponent {
greeting = 'hello';
}Child에서 @Input decorator로 Proterty value를 전달받는다.
1
2
3
4
5
6
7
8
9
10
11
12
13// hello.component.ts
import { Component, Input } from "@angular/core";
@Component({
// metadata
selector: 'app-hello',
template: `<h1>{{hi}}</h1>`,
styles: [``]
})
export class HelloComponent {
// class Field
@Input() hi: string;
}
Child Component에서 Parent Component로 data 보내는 법 : Event 발생
Child Component는 Parent Component를 모르므로 Event를 발생시켜 Parent Component에서 Event를 Handling하는 방식으로 data를 전송한다.
@Output, EventEmitter를 이용해서 Child Component에서 Event를 발생시킨다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16import { Component, Input, Output, EventEmitter } from "@angular/core";
@Component({
// metadata
selector: 'app-hello',
template: `
<h1>{{hi}}</h1>
<button (click)="greeting.emit('Hello')">greeting</button>
`,
styles: [``]
})
export class HelloComponent {
// class Field
@Input() hi: string;
@Output() greeting = new EventEmitter<string>();
}@Output으로 선언한 method는 emit으로 argument를 전달할 수 있다.
Parent Component에서는 Event Handler를 이용해서 Event를 처리한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<!--The content below is only a placeholder and can be replaced.-->
<app-hello
[hi]="greeting"
(greeting)="changeGreet($event)"
></app-hello>
`,
styles: []
})
export class AppComponent {
greeting = 'Hi~~!!!!';
changeGreet(greet: string) {
this.greeting = greet;
}
}<app-hello>내부에서 event greeting의 event handler를 등록하고 class 내부에서 정의한다. $event로 parameter에 argument 값을 받아온다.
Content Projection
Child Component의 selector tag 사이에 HTML content를 넣을 수 있다.
1 | <!-- parent --> |
1 | <!-- child --> |
Child component의 template에 <ng-content></ng-content>가 Parent component에서 전달한 template으로 치환된다.
