사용자 도구

사이트 도구


angular:component

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판
이전 판
angular:component [2020/06/18 14:34] – [Component] taekguangular:component [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
 ====== Component ====== ====== Component ======
 Angular에서 UI를 표현하기 위해서 사용한다. Angular에서 UI를 표현하기 위해서 사용한다.
 +  * [[angular:component:communication|Communication]]
  
-=== angular CLI ===+===== angular CLI =====
 <wrap hi> ng generate **component** <component name> [//option//] <wrap hi> ng generate **component** <component name> [//option//]
  ng g **component** <component name> [//option//]  ng g **component** <component name> [//option//]
-ng g c <component name> [//option//]+ng g **c** <component name> [//option//]
 </wrap> </wrap>
 +[[https://angular.kr/cli/generate#component|Angular.Io참조]]
 ===== Component Annotation ===== ===== Component Annotation =====
 Angular에게 Component를 알려주는 Annotation은 @Component라는 Annotation을 사용한다. Angular에게 Component를 알려주는 Annotation은 @Component라는 Annotation을 사용한다.
줄 17: 줄 18:
 @Component({ @Component({
   selector: 'app-test',   selector: 'app-test',
-  templateUrl: './test.component.html,+  templateUrl: './test.component.html',
   styleUrl: ['./test.component.css']   styleUrl: ['./test.component.css']
 }) })
줄 28: 줄 29:
 ===== selector ===== ===== selector =====
 3가지 유형을 가진다. 3가지 유형을 가진다.
-== Type 1. 'app-test' ==+=== Type 1. 'app-test' ===
 Template html에서 customer tag로써 표현 Template html에서 customer tag로써 표현
 <code html> <code html>
 <app-test></app-test> <app-test></app-test>
 </code> </code>
-== Type 2. '.app-test' ==+=== Type 2. '.app-test' ===
 Template html에서 class로 표현 Template html에서 class로 표현
 <code html> <code html>
 <div class="app-test"></div> <div class="app-test"></div>
 </code> </code>
-== Type 3. '[app-test]' ==+=== Type 3. '[app-test]' ===
 Template html에서 Property로 표현 Template html에서 Property로 표현
 <code html> <code html>
angular/component.1592490892.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)