現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

どうもぞえです。
今日はIonic4でAngular　Materialを利用する方法をご紹介しようと思います。

とはいっても基本的には

Getting Started with Angular Material in Ionic 4の内容と同じですので、英語が好きな方はそちらからどうぞ。

公式サイト
Angular Material
以前の記事

Ionic開発環境構築【Ionic DevAppでの実機確認まで】

angularさえできれば、Ionicで秒速でアプリとか作れるらしいよ？？？卍という噂を聞いたのでIonicについて少しまとめ＋tutorial+実機確認をやってみました。Ionicとは開発にはIonic CLIを用いるHTML5を用いたハイブリッドアプリができる。iOS・Android・windowsのク...

まずはIonicプロジェクトを開始

ionic start devdacticMaterial blank
cd devdacticMateria
ionic serve

Angular Materialを利用

addするだけでいいらしい。
そして、全てのcomponent?を一元管理

ng add @angular/material
ionic g module material --flat

src /app / material.module.tsの中身を変更

import { NgModule } from "@angular/core";
import {
  MatTableModule,
  MatStepperModule,
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatOptionModule,
  MatSelectModule,
  MatIconModule,
  MatPaginatorModule,
  MatSortModule
} from "@angular/material";

@NgModule({
  exports: [
    MatTableModule,
    MatStepperModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatIconModule,
    MatOptionModule,
    MatSelectModule,
    MatPaginatorModule,
    MatSortModule
  ]
})
export class MaterialModule {}

app / home / home.page.htmlの内容を変更
materialの一般的な使用方法のみ。
ionはionicで事前に用意されているレイアウト
ion-header

Angular Materialのが慣れてるから多分意味あることをしている。
多分

だってmattとionのコラボだよ？最強だよね？

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      Devdactic Material
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>

    <ng-container matColumnDef="first_name">
      <th mat-header-cell *matHeaderCellDef> First Name </th>
      <td mat-cell *matCellDef="let user"> {{user.first_name}} </td>
    </ng-container>

    <ng-container matColumnDef="last_name">
      <th mat-header-cell *matHeaderCellDef> Last Name </th>
      <td mat-cell *matCellDef="let user"> {{user.last_name}} </td>
    </ng-container>

    <ng-container matColumnDef="twitter">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Twitter </th>
      <td mat-cell *matCellDef="let user"> {{user.twitter}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

<mat-paginator [pageSizeOptions]="[1, 2, 5]" showFirstLastButtons></mat-paginator>
</ion-content>

app / home / home.page.tsの内容を変更
materialにdataを提供してあげる。
これによってポチった時の表示が変わる。

import { Component, OnInit, ViewChild } from "@angular/core";
import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';

@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"]
})
export class HomePage implements OnInit {
  displayedColumns: string[] = ['first_name', 'last_name', 'twitter'];
  dataSource = new MatTableDataSource<any>([
    {
      first_name: 'Max',
      last_name: 'Lynch',
      twitter: 'maxlynch'
    },
    {
      first_name: 'Matt',
      last_name: 'Netkow',
      twitter: 'dotNetkow'
    },
    {
      first_name: 'Ben',
      last_name: 'Sperry',
      twitter: 'benjsperry'
    }
  ]);

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
}

app / home / home.page.scssでtable幅を変更

table{
    width:100%;
}

おまけionicの情報を見る

ionic info

なんで８じゃないの？卍

Ionicでアプリ開発をする上で参考になりそうな記事

公式
Ionic Tutorial

crudまで教えてくれるtutorial
Ionic 4, Angular 7 and Cordova Tutorial: Build CRUD Mobile Apps

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日