npm install @angular/[email protected] @angular/[email protected]
// angular/materialとcdkのバージョンはマイナーバージョンを含めて揃える必要がある
// angular/materialとcdkのメジャーバージョンはangularのメジャーバージョンと揃える必要がある（今回の場合はv18）
// 最終的にpackage.jsonやnode_modulesにmaterialの記載があり、angular.jsonにテーマが記載されていれば運用できる

// build.options.stylesの箇所を下記のように修正
// 特に必要はないが、test.options.stylesにも同様の記載をしておくのが良いかも
"styles": [
  "src/styles.css",
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css" // ←これ
],

import { MatButtonModule } from '@angular/material/button';

@Component({
  imports: [
    MatButtonModule,
  ],
})

// colorは種類が少ないので、代わりにclassで自分で定義も可
// disabledを追記することで非活性にできる
<button mat-raised-button color="primary">決定ボタン</button>

// build.options.stylesの箇所が下記のようになっていることを確認
// 特に必要はないが、test.options.stylesにも同様の記載をしておくのが良いかも
"styles": [
  "src/styles.css",
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css" // ←たいていの場合、この記載が不足している
],

// （非推奨）
// !importantを追記することでAngular Materialの設定を上書きできるようになる
// ただし、buttonにdisabledを設定してもここで設定した色から変わらなくなってしまう
.success-button {
  background-color: #4caf50 !important;
  color: white !important;
}

.success-button:hover {
  background-color: #43a047 !important;
}

// （推奨）
// F12で優先されているstyleを確認したところ、--mdc-protected-button-container-colorの変数を上書きする必要があることが分かった
// disabledを設定すれば色もdisabledが反映される
.success-button {
  --mdc-protected-button-container-color: #4caf50;
  --mdc-protected-button-label-text-color: white;
}

.success-button:hover {
  --mdc-protected-button-container-color: #43a047;
}

import { MatTableModule } from '@angular/material/table';

@Component({
  imports: [
    MatTableModule,
  ],
})
export class SampleComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = [
    { position: '1', name: '水素', weight: 1.0079, symbol: 'H' },
    { position: '2', name: 'ヘリウム', weight: 4.0026, symbol: 'He' },
  ];
}
// 値を入れたくないセルがあれば、name: '水素'の箇所を削除すれば消えてくれる

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>ポジション</th>
    <td mat-cell *matCellDef="let element">{{ element.position }}</td>
  </ng-container>

// ボタンをテーブル内に配置したい場合は、下記の要に記載
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element">
      <button mat-raised-button class="success-button">登録</button>
    </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let element">{{ element.weight }}</td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef>記号</th>
    <td mat-cell *matCellDef="let element">{{ element.symbol }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

import {MatExpansionModule} from '@angular/material/expansion';

@Component({
  imports: [
    MatExpansionModule
  ],
})

<mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
        <mat-panel-title> This is the expansion title </mat-panel-title>
        <mat-panel-description> This is a summary of the content </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
</mat-expansion-panel>

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations'; // ← 追加

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimations() // ← 追加
  ]
};

// multiを定義すると複数同時に展開でき、記述しないとどれか一つしか同時に展開できなくなる
<mat-accordion multi>
    <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title> This is the expansion title </mat-panel-title>
            <mat-panel-description>
            </mat-panel-description>
        </mat-expansion-panel-header>
    </mat-expansion-panel>

    <mat-expansion-panel>
        <mat-expansion-panel-header>
            <mat-panel-title>Another Title</mat-panel-title>
        </mat-expansion-panel-header>
        <p>Other Content</p>
    </mat-expansion-panel>
</mat-accordion>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

import { ChangeDetectionStrategy, Component } from '@angular/core';
import {MatIconModule} from '@angular/material/icon';

@Component({
  imports: [
    MatIconModule
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})

// Homeのアイコン
<mat-icon aria-hidden="false" aria-label="Example home icon" fontIcon="home"></mat-icon>

// チェックサークルのアイコン
<mat-icon>check_circle_outline</mat-icon>

<mat-expansion-panel hideToggle #panel> // #panelを追加
    <mat-expansion-panel-header>
        <mat-panel-title> This is the expansion title </mat-panel-title>
        <!-- ↓アコーディオンの補足情報を書ける場所だが、今回はここにアイコンを配置 -->
        <mat-panel-description>
            <mat-icon [class.rotated]="panel.expanded">expand_more</mat-icon> // 追加
        </mat-panel-description>
    </mat-expansion-panel-header>
</mat-expansion-panel>

mat-icon {
  transition: transform 0.3s ease;
}

mat-icon.rotated {
  transform: rotate(180deg); /* expand_more → expand_less に見える */
}

// transition | CSSのプロパティにアニメーション的な変化を加える設定
// transform | transformプロパティ（回転・拡大縮小など）の変化にアニメをつける
// 0.3s | 変化にかける時間：0.3秒でアニメーションが完了する
// ease | アニメーションの速度カーブ（最初と最後がなめらか、中間が速め）

[class.rotated]="panel.expanded"
→ これは「panel.expanded が true のとき、rotated クラスを付ける」というAngularの構文です。

panel.expanded
→ これは <mat-expansion-panel> が現在展開されているかどうかを示す 内部の状態プロパティです（Angular Materialが提供）

## 処理の流れ
初期状態（折りたたまれている） → panel.expanded === false

クラス rotated は付かない

transform: none → ▼ 表示

アコーディオンをクリックして展開
→ panel.expanded === true

rotated クラスが付く

transform: rotate(180deg) が有効 → ▼ がくるっと回転して ▲ 風になる

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';

@Component({
  imports: [
    MatFormFieldModule,
    MatInputModule,
  ],
})

// appearanceをfillにすると下線だけ、outlineにすると枠線ができる（デフォルトはfill）
<mat-form-field appearance="fill">
  <mat-label>Textarea</mat-label>
  <textarea matInput></textarea>
</mat-form-field>