はじめての Angular ― コンポーネント

導入

Angular の画面は コンポーネントでできています。コンポーネントは「装飾（デコレータ）付きのクラス」です。@Component({...}) でテンプレート（見た目）を指定し、クラスにデータや処理を書きます。

説明

最小のコンポーネントです。

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<h1>はじめての Angular</h1>`,
})
class AppComponent {}

• @Component({...}) … このクラスがコンポーネントだと示すデコレータ。
• selector: 'app-root' … このコンポーネントが表示される場所の名前。
• template … 表示する HTML。バッククォート ` で囲むと複数行書けます。
• class AppComponent {} … コンポーネントの中身（今は空）。

やってみよう

template の <h1> の文字を変えたり、<p>...</p> の行を追加したりしてみましょう。