Angular - [Angular Component]

構成部品は3つの領域に分かれています。

導入領域

@コンポーネント領域

素子クラス領域

import領域

コンポーネントを使用するために必要な外部モジュール(モジュールパッケージ)の特定のクラスをインポートする必要があります.

ライブラリモジュール：Angularに埋め込まれたモジュールを表し、@使用

≪カスタム・モジュール|Custom Module|emdw≫:ユーザーが必要に応じて作成したモジュールの意味。相対パスの使用

@Componentエリア(component.ts)

構成部品に関する設定情報の領域を指定します.

セレクタのプロパティ:コンポーネントインスタンスの作成と挿入を示すCSSセレクタ

app.component.ts自体からurlを呼び出すのではなくdom要素とcssを直接適用できます。(back-tickを使用)

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

@Component({
  selector: 'app-root', // 이 컴포넌트를 쓰기위한 명칭 app-root -> index.html 에서 사용
  template: `<table>
    <tr>
      <td><h1>홍길동</h1></td>
    </tr>
  </table>`, // 화면 구성
  styles: [
    `
      h1 {
        color: red;
      }
    `,
    `
      h2 {
        background: yello;
      }
    `,
  ], // 스타일 지정
})
export class AppComponent {
  title = 'sample';
}