Angular で Material Design を使用する

Material Design はGoogleが提唱しているデザインフォーマットです。オープンソースで提供されています。Angular も Google が提唱している SPA フレームワークですので、Angular から簡単に Material Design を使用してみましょう。

1. Angular Material, Angular CDK, Angular Animations をインストールする。

以下のNPMからサクッとインストールします。

npm install --save @angular/material @angular/cdk @angular/animations

2. Material Icon を表示する方法

2.1. app.module.ts を修正して MatIconModule を import する

以下を先頭に追加します。

    import {MatIconModule} from '@angular/material/icon';

imports の中に MatIconModule を追加します。

    @NgModule({
        ... 省略 ...
      ],
      imports: [
        ... 省略 ...
        MatIconModule
        ... 省略 ...
    })

2.2. index.html の中に Material Icon 用のstylesheet を追加します。

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2.3. 表示したい箇所にMaterial Icon のHTMLを追加します。

    <mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>

こんな風に表示されたら成功です。

3. ボタンを表示する方法

3.1. app.module.ts を修正して MatButtonModule を import する

以下を先頭に追加します。

    import {MatButtonModule} from '@angular/material/button';

imports の中に MatButtonModule を追加します。

    @NgModule({
        ... 省略 ...
      ],
      imports: [
        ... 省略 ...
        MatButtonModule
        ... 省略 ...
    })

3.2. Material Design のテーマCSS をインポートします。

https://material.angular.io/guide/theming

例えばですが、style.css に以下を追加します。

    @import '@angular/material/prebuilt-themes/indigo-pink.css';

3.3. 表示したい箇所にMaterial Button のHTMLを追加します。

    <button mat-button>Basic</button>
    <button mat-button color="primary">Primary</button>
    <button mat-button color="accent">Accent</button>
    <button mat-button color="warn">Warn</button>
    <button mat-button disabled>Disabled</button>

こんな風に表示されたら成功です。

4. ラジオボタンを表示する方法

4.1. app.module.ts を修正して MatButtonModule を import する

以下を先頭に追加します。

    import {MatRadioModule} from '@angular/material/radio';

imports の中に MatRadioModule を追加します。

    @NgModule({
        ... 省略 ...
      ],
      imports: [
        ... 省略 ...
        MatRadioModule
        ... 省略 ...
    })

4.2. 表示したい箇所にMaterial Button のHTMLを追加します。

    <mat-radio-group aria-label="Select an option">
      <mat-radio-button value="1">Option 1</mat-radio-button>
      <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>

こんな風に表示されたら成功です。

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱