Angular_MatIconとMatToolTipでアイコンを使いこなす #290日目
【一言日記】
長男に手足口病の症状が・・・先月もかかったのに再び・・。免疫がある分、先月よりは酷くならないはずですが。本当に毎月1度は何かある子です笑。
Angularでのアプリ開発において、簡単なアイコン表示をできるようになりたいと思って調べました。
公式チュートリアルで作成するアプリに試しで色々表示してみた結果が以下です。色んなアイコンがデフォルトで使用可能でした。
ちなみに左から2番目の「infoマーク」だけグレーにしてますが、加えてマウスオンするとマウスポインターがクリック仕様に変わり、「情報」というTooltipが表示されるようにしてあります。また、このマークをクリックすると別ページに遷移するようリンクも貼ってあります。
ではどうやって設定していくか整理していきます。
１．Angular Materialをインストールする
以下のコマンドでAngular Materialをインストールします。そうすると「index.html」が変化するので、順を追って見ていきます。
$ ng add @angular/materialインストール前が以下です。
[index.html] ※インストール前
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularTourOfHeroes</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
コマンドを打つといくつか質問されるので、適当に応えます。
$ ng add @angular/material
ℹ Using package manager: npm
✔ Found compatible package version: @angular/material@14.2.5.
✔ Package information loaded.
The package @angular/material@14.2.5 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1163 bytes)
✔ Packages installed successfully.
UPDATE src/app/app.module.ts (1358 bytes)
UPDATE angular.json (3242 bytes)
UPDATE src/index.html (587 bytes)
UPDATE src/styles.css (861 bytes)インストールが完了すると、「index.html」が以下のように変化します。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularTourOfHeroes</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>これでアイコンを使う下地ができました。
２．MatIconModuleとMatTooltipModuleをインポートする
アイコンを使うためにMatIconModuleを、Tooltipを使うためにMatTooltipModuleをそれぞれインポートします。
インポートは他モジュールと同様「app.module.ts」で行います。
[app.module.ts]
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
@NgModule({
declarations: [
～省略～
],
imports: [
～省略～
BrowserAnimationsModule,
MatIconModule, // ここにインポート
MatTooltipModule // ここにインポート
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }これでアプリ内でMaterial IconsとTooltipを使う準備が整いました。
３．<mat-icon>タグでアイコンを使う
Material Iconsの基本的な使い方は以下です。
<mat-icon>アイコンのinstruction</mat-icon>アイコンのinstructionはGoogle Fontsにまとまっています（AngularはGoogleが開発している言語）。
Tooltipを使う場合は以下のように書きます。
<mat-icon matTooltip="表示したい文字">アイコンのinstruction</mat-icon>冒頭で紹介した、左から2番目の「infoマーク」だけグレー、かつマウスオンするとマウスポインターがクリック仕様に変わり、「情報」というTooltipが表示されるようにして、別ページへのリンクも貼ってある部分は以下のように書きます。infoアイコン以外は単にアイコンを表示しているだけです。
[app.component.html]
<h1>{{ title }}</h1>
<div>
<mat-icon>thumb_up</mat-icon>
<mat-icon class="icon" matTooltip="情報" routerLink="/heroes">info</mat-icon>
<mat-icon>done</mat-icon>
<mat-icon>delete</mat-icon>
<mat-icon>filter_alt</mat-icon>
<mat-icon>share</mat-icon>
<mat-icon>group_add</mat-icon>
<mat-icon>person_remove_alt_1</mat-icon>
<mat-icon>group_off</mat-icon>
</div>Tooltipとリンク以外はただのCSSです。
[app.component.css]
.icon {
color: gray;
cursor: pointer;
}ここまでお読みいただきありがとうございました！