【Angular】コンポーネントの作成と埋め込み【ng generate component】

ng generate component コンポーネント名

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

@Component({
  // コンポーネント埋め込み時のタグ名
  selector: 'app-main-content',
  // 本TypeScriptの対応するHTMLファイル
  templateUrl: './main-content.component.html',
  // コンポーネント用スタイルシート
  // 【重要】親のコンポーネントには影響しない
  styleUrls: ['./main-content.component.css'],
})

// ロジックを記述
export class MainContentComponent implements OnInit {
  name = 'サメハック';
  message = 'hello angular!';

  constructor() {}

  // 初期処理
  ngOnInit(): void {}
}

<p>こんにちは、{{ name }}です！</p>

<!-- 元のmessage -->
<p>message・・・ {{ message }}</p>
<!-- JavaScriptの関数を使って大文字に変換 -->
<p>message.toUpperCase()・・・ {{ message.toUpperCase() }}</p>

<selector名></selector名>

<h1>{{ title }}</h1>

<!-- main-contentコンポーネントの埋め込み -->
<app-main-content></app-main-content>

* {
    color:　red;
}