【Angular】コンポーネントでの変数の取り扱い

前回の記事で作成したコンポーネントで変数を取り扱っていきます。

コンポーネントのクラスプロパティ設定
テンプレート編集
リストの表示

コンポーネントのクラスプロパティ設定

「header」コンポーネントのクラスでプロパティを設定します。

▼「src/app/header/header.component.ts」を編集

※プロパティ「appname」を設定します。

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

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [],
  templateUrl: './header.component.html',
  styleUrl: './header.component.css'
})
export class HeaderComponent {
  appname:  string

  constructor() {
    this.appname = "An Angular App"
  }
}

テンプレート編集

クラスプロパティ「appname」を表示できるようにします。

▼「src/app/header/header.component.html」を編集

※マスタッシュ内にプロパティ名を記述します。

<p>{{ appname }}</p>

▼ブラウザリロード

プロパティの値「An Angular App」が表示されました。

リストの表示

リスト表示用のコンポーネント「UserList」を追加します。

ng generate component user-list

ユーザー一覧を定義します。

▼「src/app/user-list/user-list.component.ts」を編集

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

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [],
  templateUrl: './user-list.component.html',
  styleUrl: './user-list.component.css'
})
export class UserListComponent {
  users: {
    id: number;
    name: string;
    email: string;
  }[];

  constructor () {
    this.users = [
      { id: 1, name: 'Hoge', email: 'hoge@example.com' },
      { id: 2, name: 'Fuga', email: 'fuga@example.com' },
      { id: 3, name: 'Piyo', email: 'piyo@example.com' },
    ];
  }
}

テンプレートでユーザー一覧を表示させます。

▼「src/app/user-list/user-list.component.html」を編集

<table>
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
    </tr>
    @for (user of users; track user.id) {
        <tr>
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
        </tr>
    }
</table>

※配列の繰り返し処理には「@for」テンプレート構文を使います。

注: トラックの使用は必須ですが、ID またはその他の一意の識別子を使用できます。
@for 制御構文

ユーザー一覧表示コンポーネントの読込設定をします。

▼「src/app/app.component.ts」を編集

※冒頭に追記

import { UserListComponent } from './user-list/user-list.component';

※「import」に追記

  imports: [RouterOutlet, HeaderComponent, UserListComponent],

※完成形

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent} from './header/header.component';
import { UserListComponent } from './user-list/user-list.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, HeaderComponent, UserListComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-app';
}

ルートコンポーネントのテンプレートにユーザー一覧コンポーネントを適用します。

▼「src/app/app.component.html」を編集

<app-header></app-header>
<h1>Hello World!</h1>
<app-user-list></app-user-list>

▼ブラウザリロード