AngularとMaterialデザインの組み合わせって素晴らしいーー。
AngularはGoogleが開発したフレームワークなので、Materialデザインを惜しみなく使うことができます。
ということで今回は、AngularでMaterialデザインを使う方法を解説します。
僕のPC環境
OS：Windows10
Angular：7
Angular Materialの使い方
では、Angular Materialの使い方を解説します。
|
1 |
npm install --save @angular/material @angular/cdk |
Angular Materialをインストールします。
|
1 |
npm install --save @angular/animations |
Angular Animationsをインストールします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
// 共通モジュール import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatTabsModule } from '@angular/material/tabs'; import { MatCheckboxModule } from '@angular/material/checkbox'; // 共通サービス import { HttpService, NoopInterceptor } from './service/http/http.service'; import { RouterService } from './service/router/router.service'; // 共通コンポーネント import { AppComponent } from './app.component'; import { LoginComponent } from './component/login/login.component'; import { TimepickerComponent } from './component/timepicker/timepicker.component'; import { TabsComponent } from './component/material/tabs/tabs/tabs.component'; import { PageNotFoundComponent } from './component/error/page-not-found/page-not-found.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, TimepickerComponent, PageNotFoundComponent, TabsComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, NgbModule, BrowserAnimationsModule, MatTabsModule, MatCheckboxModule ], providers: [ HttpService, { provide: HTTP_INTERCEPTORS, useClass: NoopInterceptor, multi: true }, RouterService ], bootstrap: [AppComponent] }) export class AppModule { } |
「BrowserAnimationsModule」を適用します。
|
1 |
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; |
CSSを適用します。
以上です！
参考サイト
以下のサイトにGetting startedが記載されています。
■Angular Material公式サイト
URL：「https://material.angular.io/guide/getting-started」
おすすめ書籍
僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ！
まとめ
Angularを使うならMaterialデザインを使わないと勿体ないですよね。
簡単に導入できるので、是非一度使ってみてください！
ではまた！
