Angular（Ionic）でアコーディオンを作成する

Angular（Ionic）でカスタムコンポーネントを使ってアコーディオンを作成する方法です．

今回はIonicのTabsプロジェクトをもとに作成し，Tab1に設置することにします．

まず，tab1の中にコンポーネントを作成します．

ionic g component tab1/components/expandable

次に作成したコンポーネントを下記のように書き換えます．

<div #expandWrapper class='expand-wrapper' [class.collapsed]="!expanded">
    <ng-content></ng-content>
</div>

.expand-wrapper {
  transition: max-height 0.4s ease-in-out;
  overflow: hidden;
  height: auto;
}

.collapsed {
  max-height: 0 !important;
}

import { Component, AfterViewInit, Input, ViewChild,  ElementRef, Renderer2 } from "@angular/core";

@Component({
  selector: 'app-expandable',
  templateUrl: './expandable.component.html',
  styleUrls: ['./expandable.component.scss'],
})
export class ExpandableComponent implements AfterViewInit {
  @ViewChild("expandWrapper", { read: ElementRef }) expandWrapper: ElementRef;
  @Input("expanded") expanded: boolean = false;
  @Input("expandHeight") expandHeight: string = "150px";

  constructor(public renderer: Renderer2) {}

  ngAfterViewInit() {
    this.renderer.setStyle(this.expandWrapper.nativeElement, "max-height", this.expandHeight);
  }
}

以上でコンポーネントは作成できました．

次にTab1にコンポーネントを登録します．moduleで読み込んで，declarationsに登録します．これによりapp-expandableタグを使ってTab1のHTMLからコンポーネントを呼び出せるようになります．

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';

import { Tab1PageRoutingModule } from './tab1-routing.module';
import { ImageCropperModule } from 'ngx-image-cropper';

+import { ExpandableComponent } from "./components/expandable/expandable.component";

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule,
    ImageCropperModule
  ],
  declarations: [
    Tab1Page,
+    ExpandableComponent
  ]
})
export class Tab1PageModule {}

実装

あとはtab1.page.htmlとtab1.page.tsに書くだけです．

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>


<ion-content>
  <ion-card (click)="expandItem()">
    <ion-card-header>
      <ion-card-title>My Neighbor Totoro</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <app-expandable expandHeight="100px" [expanded]="item1expand">
        <p>
          Hello there.
        </p>
      </app-expandable>
    </ion-card-content>
  </ion-card>
  <ion-card (click)="expandItem()">
    <ion-card-header>
      <ion-card-title>My Neighbor Totoro</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <app-expandable expandHeight="100px" [expanded]="item2expand">
        <p>
          Hello there.
        </p>
      </app-expandable>
    </ion-card-content>
  </ion-card>


</ion-content>

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  item1expand:boolean = true;
  item2expand:boolean = false;

  constructor(
  ) {}

  expandItem(): void {
    this.item1expand = !this.item1expand;
    this.item2expand = !this.item2expand;
  }

}