Angular Component
- Component는 다음과 같은 3개의 파일로 구성된다.
- 타입 스크립트 파일인 ts 파일
- 템플릿 html 파일
- 스타일 css 파일
- (spc.ts, 테스트를 위한 파일)
@Component
- Angular가 컴파일 될 때, 이 클래스가 Component 임을 알려주는 어노테이션
@Component의 속성
1. Selector (어느곳에)
- 현재의 Component의 이름이라고 보면 된다. 예를들어 Component의 Selector : ‘main’ 이라고 할때, 다른 컴포넌트 파일에서 html 파일에 <main></main> 이라고 치면 selector : main 이라고 했던 컴포넌트가 레고 부품처럼 html 파일 태그친 부분에 들어가게 된다.
- Component가 들어갈 html tag
- templateUrl이 위치하게될 html 태그 이름
- ‘app-root’ -> index.html의 <app-root></app-root>
2. TemplateUrl(무엇을)
- Component에 들어가는 html 문서의 골격
- 첫 화면에 보여지는 Welcome 화면의 태그들이 app.compnent.html 에 있다.
3. StyleUrls(어떤 스타일로)
- html의 스타일을 지정해주는 css 파일
- javaScript Array 형태로 여러 파일이 선택될 수 있다.
