【Angular】Outputを使って親コンポーネントに値を渡そう！

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Angularの解説シリーズです。

今回はOutputデコレーターについて学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

Outputデコレーターが使える
親コンポーネントに値を渡せる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

作りたいもの
1. 実行環境
Outputデコレーターを使おう
1. Outputデコレーターの構文
実際に作ってみよう！
まとめ

作りたいもの

このように子コンポーネントのクリックイベントを介して
親コンポーネントに値を渡すアプリケーションを作成します。

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

Outputデコレーターを使おう

子コンポーネントから親コンポーネントに値を渡すには
Outputデコレーターを使用します。

Outputデコレーターの構文

■子コンポーネント

// 親コンポーネントへ渡すデータ
@Output() childData = new EventEmitter();

// 親コンポーネントへ渡す値の設定
this.childData.emit(渡したい値);

■親コンポーネント※値を受け取る側

＜子コンポーネント (childData※子コンポーネントと変数名は統一)="親コンポーネントの関数($event)"＞

このように記述することで、親コンポーネント側で受け取った値を
処理に組み込むことが出来ます。

親子で変数名を統一するのがポイントだよ！

実際に作ってみよう！

初期設定

ng new my-app
ng generate component parent
ng generate component child
ng serve --open

子コンポーネントの設定

child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
})
export class ChildComponent implements OnInit {
  // 親コンポーネントへ渡すデータ
  @Output() messageFromChild = new EventEmitter();

  // 受け取ったメッセージを親コンポーネントへ渡す
  passMessage(msg: string) {
    this.messageFromChild.emit(msg);
  }

  // 親のメッセージをクリア
  clearMessage() {
    this.messageFromChild.emit('');
  }

  constructor() {}

  ngOnInit(): void {}
}

child.component.html

<h2>子コンポーネント</h2>

<button (click)="passMessage('HELLO')">親にメッセージ'HELLO'を渡す</button>
<button (click)="clearMessage()">クリア</button>

親コンポーネントに値を渡す準備ができたよ！

親コンポーネントの設定

parent.component.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
})
export class ParentComponent implements OnInit {
  message: string = '';

  /**子コンポーネントから受け取る */
  setMessage(msg: string) {
    this.message = msg;
  }

  constructor() {}

  ngOnInit(): void {}
}

parent.component.html

<h2>親コンポーネント</h2>

子コンポーネントから受け取ったメッセージ：{{ message }}

<!-- <子コンポーネント (変数名※子コンポーネントと統一)="親コンポーネントの関数($event)" > -->
<app-child (messageFromChild)="setMessage($event)"></app-child>

app.component.html

<app-parent></app-parent>

このように、子コンポーネントから親コンポーネントに
メッセージを渡すことが出来ました。

まとめ

Outputデコレーターを使用すると、子コンポーネントから親コンポーネントに値が渡せる
@Output() childData = new EventEmitter();

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram