Angular에서 UI를 표현하기 위해서 사용한다.

• Communication

ng generate component <component name> [option] ng g component <component name> [option] ng g c <component name> [option] Angular.Io참조

Angular에게 Component를 알려주는 Annotation은 @Component라는 Annotation을 사용한다. -sample

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() {
  }
}

3가지 유형을 가진다.

Template html에서 customer tag로써 표현

<app-test></app-test>

Template html에서 class로 표현

<div class="app-test"></div>

Template html에서 Property로 표현

<div app-test></div>

직접 inline template를 입력

template: '<div>Inline template</div>',

template: `<div>
Inline template
</div>`,

Inline template

styles: `
  div{
    color: red
  }
`,