日々更新中です!

【Angular】Materialデザインの使い方を解説!

  • URLをコピーしました!
悩んでいる男の子

AngularでMaterialデザインを使う方法が分からないんだよね。。

こんな悩みを解決します。

  • 本記事の内容
  • Materialデザインの使い方
  • 本記事の執筆者
プロフィール
いずみん(どこの写真だよ)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 物販月利50万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
  • 物販は彼女と楽しみながらやっています!

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

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

目次

Angular Materialの使い方

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

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

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

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 { }

BrowserAnimationsModule」を適用します。

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

CSSを適用します。

これでマテリアルデザインが使えるようになります。

まとめ

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

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

ではまた!

  • おすすめ本はこちら!
いずみん

僕は↑の本でAngularの勉強をしました!
非常に分かりやすいのでおすすめです!

  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

いずみんのアバター いずみん 自由大好きおじ

自由大好きおじ | 物販月利50万達成⇨脱サラ | 物販(アパレルせどり)・アフィリエイト・プログラミング・投資に関する情報を発信中 | 元エンジニア | 保有資格約20個

コメント

コメントする

目次
閉じる