プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

Ionic4+Angular Materialの始め方【Ionic事前調査兵団】

最終更新日:2019/06/27


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

とはいっても基本的には

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

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

まずは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

なんで8じゃないの?卍

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

公式
Ionic Tutorial

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

The following two tabs change content below.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP