【Angular7】Materialデザインの使い方を解説！ │ Traveler

AngularとMaterialデザインの組み合わせって素晴らしいーー。

AngularはGoogleが開発したフレームワークなので、Materialデザインを惜しみなく使うことができます。

ということで今回は、AngularでMaterialデザインを使う方法を解説します。

1. 僕のPC環境
2. Angular Materialの使い方
3. 参考サイト
4. おすすめ書籍
5. まとめ

僕のPC環境

OS：Windows10

Angular：7

Angular Materialの使い方

では、Angular Materialの使い方を解説します。

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

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

Angular Materialをインストールします。

npm install --save @angular/animations

1	npm install --save @angular/animations

Angular Animationsをインストールします。

// 共通モジュール
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 { }

// 共通モジュール

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」を適用します。

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

1	@import "~@angular/material/prebuilt-themes/indigo-pink.css";

CSSを適用します。

以上です！

参考サイト

以下のサイトにGetting startedが記載されています。

■Angular Material公式サイト

URL：「https://material.angular.io/guide/getting-started」

まとめ

Angularを使うならMaterialデザインを使わないと勿体ないですよね。

簡単に導入できるので、是非一度使ってみてください！

ではまた！

Travelerを知らないの？

とりあえず見てみろよ