【Angular】ngIfを使用して要素の表示・非表示ができるアコーディオンを実装する

HITOSUKEのシステム開発Unitでシステム開発を担当しているTです。
今回は、HTMLテンプレート上でngIfディレクティブを使って要素の表示・非表示ができるアコーディオンの実装の解説をしていきます。
Angularを使っていれば、とても簡単にアコーディオンを実装することができるので、ぜひ参考にしてください。
※どのような場面で活用できるかは記事の後半部分で解説します。

実装

はじめに挙動をお見せします。
※埋め込みの際の視認性を高めるため背景色を変更しています。

実際の実装を提示します。
下記の実装ではgifの通り、「表示」ボタンをクリックするとdivタグ内に配列prefecturesの要素がアコーディオン風に出現します。
表示されているときは「表示」ボタンが「閉じる」に変わり、クリックすると要素が閉じます。

app.component.ts

import { Component, OnInit } from '@angular/core';
import { trigger, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('openClose', [
      transition(':enter', [
        style({ height: '0',overflow: 'hidden' }),
        animate('0.5s', style({ height: '*'}))
      ]),
      transition(':leave', [
        style({ height: '*',overflow: 'hidden' }),
        animate('0.5s', style({ height: '0' }))
      ]),
    ])
  ]
})
export class AppComponent implements OnInit {
  prefectures: string[] = [
      'hokkaido',
      'aomori',
      'iwate',
      'miyagi',
      'yamagata',
      'fukushima'
  ];
　isOpen = false;
  ngOnInit() {}
  toggle() {
    this.isOpen = !this.isOpen;
  }
}

app.component.html

<button (click)="toggle()">
  {{isOpen ? '閉じる' : '表示'}}
</button>

<div *ngIf="isOpen" [@openClose]>
  <ul>
    <li *ngFor="let prefecture of prefectures">{{prefecture}}</li>
  </ul>
</div>

解説

今回の実装ではapp.component.ts内で@angular/animationsを使用して実装をしています。

はじめに、triggerにてトリガー名を決めます。今回は'openClose'とうい命名をしました。
transitionにはenterとleaveを指定して、アニメーション時で行いたいスタイルを指定しています。

要素の表示・非表示に関してはtoggle関数でisOpenの真偽値を変更します。

app.component.htmlでは、まずbuttonタグにて表示・非表示のためのtoggle関数を呼び出します。
[@openClose]が記されている要素の中がアコーディオンによって表示されます。
今回はtrigger名をopenCloseにしているので、ソースコードのような実装になります。

Angular公式ドキュメント(https://angular.jp/guide/animations)

活用場面

もともと少なかった要素数が、長く運用して多くなった時に常に一覧で表示されているのはUIが良くないので、アコーディオンを実装することでユーザビリティの向上につながりますね。
Angularを使用していれば少ないコード量でアコーディオンを実装することができます。
しかし、ngIfディレクティブを使用する場合、コンポーネント（タグ）内の要素がすべて破棄されるので、再描画するのに時間がかかることがあります。
表示・非表示の頻度が高い場合はスタイルシートで制御を試みたりするのも一つの手ですね。

さいごに

もし、HITOSUKEのシステム開発Unitの知りたいことや興味・関心がありましたらぜひコメントください！

※HITOSUKEでは一緒に事業を盛り立ててくれる仲間を募集しています！

少しでも気になってくれた方は、こちらをご覧ください。

HITOSUKE採用サイト | フランチャイズのプロフェッショナル集団