angular:component

차이

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

차이 보기로 링크

--- angular:component [2021/10/01 14:20] – 바깥 편집 127.0.0.1
+++ angular:component [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+====== 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 =====
+가지 유형을 가진다.
+=== 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>