[Angular] 컴포넌트 component

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'] 
})
export class TestComponent {
}

@Component 데코레이터에 js 객체를 넣어 컴포넌트를 구성한다.

컴포넌트의 메타데이터 라고 할 수 있다.

 

selector

이 컴포넌트를 다른 컴포넌트의 템플릿에서 사용할때 사용할  HTML tag이다.

기본적으로 원하는 형태로 사용해도 되지만 중복되지 않도록 해야 하고, 

div나 p 등 이미 존재하는 태그는 사용해선 안된다.

 

templateUrl

해당 컴포넌트가 외부 파일을 컴포넌트의 템플릿으로 사용할 때 템플릿 경로

 

template

외부 파일을 참조하지 않고 내부에서 사용하고 싶을때는 templateUrl 대신 template을 사용한다. 보통 템플릿 파일의 내용이 짧은 경우 이렇게 사용하기도 한다.

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

@Component({
  selector: 'app-test',
  template: `
    <div> hi </div>
    <div> ok </div>
  `
  styleUrls: ['./test.component.css'] 
})
export class TestComponent {
}

 

styleUrls

템플릿에 적용할 css 경로

 

 

styles

template 과 마찬가지로 외부 css 파일 크기가 매우 작은 경우에 사용한다.

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

@Component({
  selector: 'app-test',
  template: `
    <div> hi </div>
    <div> ok </div>
  `
  styles: [`
  	div { color: blue }	
  `]
export class TestComponent {
}