【Angular】子コンポーネントに値を渡そう！【props】

<子コンポーネント [子コンポーネントへ渡す際のプロパティ名]="渡したいデータ"></子コンポーネント>

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

@Input() 親から受け取るプロパティ名: データ型;

<子コンポーネント [propsX]="データ"></子コンポーネント>

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

@Input(propsX) 子コンポーネントで扱いたいプロパティ名: データ型;

touch ./src/app/user-detail.ts

// ユーザ情報を定義
export interface UserDetail {
  name: string;
  age: number;
  job: string;
  hobby: string;
}

ng generate component users

import { Component, OnInit } from '@angular/core';
import { UserDetail } from '../user-detail';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css'],
})
export class UsersComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

  // 選択されたユーザー　※子コンポーネントに渡す値
  selectedUser: UserDetail;

  /**
   * クリックされたユーザ情報をthis.selectedUserに入れて子コンポーネントに渡す
   * @param user ユーザ情報
   * 戻り値なし
   */
  userSelect(user: UserDetail): void {
    this.selectedUser = user;
  }

  // Userインターフェイスを型として指定
  user1: UserDetail = {
    name: 'サメハック',
    age: 29,
    job: 'エンジニア',
    hobby: 'ギター',
  };

  // Userインターフェイスを型として指定
  user2: UserDetail = {
    name: 'いぬハック',
    age: 30,
    job: '不動産',
    hobby: 'ランニング',
  };

  // Userインターフェイスを型として指定
  user3: UserDetail = {
    name: 'ねこハック',
    age: 45,
    job: 'アパレル',
    hobby: '旅行',
  };

  userList = [this.user1, this.user2, this.user3];
}

// 選択されたユーザー　※子コンポーネントに渡す値
selectedUser: UserDetail;

/**
* クリックされたユーザ情報をthis.selectedUserに入れて子コンポーネントに渡す
* @param user ユーザ情報
* 戻り値なし
*/
userSelect(user: UserDetail): void {
    this.selectedUser = user;
}

<!-- ループ処理でuserListを１つずつ取り出す -->
<div *ngFor="let user of userList">
  <!-- クリックされたら、userSelect関数を叩き、引数としてuserデータを渡す -->
  <button (click)="userSelect(user)">{{ user.name }}</button>
</div>
<br />

<!-- 子コンポーネントのuserプロパティにselectedUserを渡す -->
<app-user-detail [user]="selectedUser"></app-user-detail>

ng generate component user-detail

import { Component, Input, OnInit } from '@angular/core';
import { UserDetail } from '../user-detail';

@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.css'],
})
export class UserDetailComponent implements OnInit {
  /**
   * 親コンポーネントから値を受け取るための記述
   * @Input() プロップス名: データ型;
   *
   * UserDetail型のデータをuserというプロップス名で受け取る
   */
  @Input() user: UserDetail;

  constructor() {}

  ngOnInit(): void {}
}

<div *ngIf="user; else notSelect">
  名前：{{ user.name }}
  <br />
  年齢：{{ user.age }}
  <br />
  職業：{{ user.job }}
  <br />
  趣味：{{ user.hobby }}
</div>

<ng-template #notSelect>ユーザを選択してください</ng-template>

ERROR TypeError: Cannot read properties of undefined (reading 'name')

<app-users></app-users>