====== Component ======
Angular에서 UI를 표현하기 위해서 사용한다.
  * [[angular:component:communication|Communication]]

===== angular CLI =====
<wrap hi> ng generate **component** <component name> [//option//]
 ng g **component** <component name> [//option//]
ng g **c** <component name> [//option//]
</wrap>
[[https://angular.kr/cli/generate#component|Angular.Io참조]]
===== Component Annotation =====
Angular에게 Component를 알려주는 Annotation은 @Component라는 Annotation을 사용한다.
-sample
<code javascript>
import { Component, OnInit } from '@angular/core';
import { AboutComponent } from './about/about.component';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrl: ['./test.component.css']
})
export class TestComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}
</code>
===== selector =====
3가지 유형을 가진다.
=== Type 1. 'app-test' ===
Template html에서 customer tag로써 표현
<code html>
<app-test></app-test>
</code>
=== Type 2. '.app-test' ===
Template html에서 class로 표현
<code html>
<div class="app-test"></div>
</code>
=== Type 3. '[app-test]' ===
Template html에서 Property로 표현
<code html>
<div app-test></div>
</code>
===== template =====
직접 inline template를 입력
<code html>
template: '<div>Inline template</div>',
</code>
<code html>
template: `<div>
Inline template
</div>`,
</code>

===== styles =====
Inline template
<code>
styles: `
  div{
    color: red
  }
`,
</code>