仮想通貨ブログに専念するため、たまーに更新します!仮想通貨ブログはこちら!

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

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

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

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

  • 本記事の内容
  • Materialデザインの使い方
  • 本記事の執筆者
いずみん(@izumin_0401)

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

いずみん

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

プログラミングを学びたい方必見!

オンライン特化のプログラミングスクールなら「」が超おススメ!

副業としてプログラミングを学びたい方にもおすすめのスクールです!

  • 初心者が9割以上なので挫折せずに学べる!
  • 受講者に副業の仕事を1案件以上斡旋! ※条件あり
  • オンライン完結型なので、在宅でもお仕事可!
  • プロのメンターがサポートしてくれる!

キャリアカウンセリングメンター相談無料でできるのもおすすめポイントです!

目次

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の勉強をしました!
非常に分かりやすいのでおすすめです!

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

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

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

稼ぐスキルを身に付けよう!!
SNSもフォローしてね!

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

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