More than 5 years have passed since last update.

Angular Materialの雛形を作成する手順

Last updated at 2020-02-02Posted at 2019-12-18

1.新しいAngularプロジェクトを作る

ng new myNewProject

2.新しいComponent (ページ的なもの)を作る

ng generate component pages/home

3.このコマンドを実行

ng add @angular/material

4.style.cssにこれを追加

* {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body, html {
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
}

5.ネットで見たすごいおじさんのコマンドを実行
ng generate @angular/material:material-nav --name=main-nav

6.app-routing.module.tsのroutesをこんな感じにする

const routes: Routes = [
  { path: '', component: HomeComponent },
];

7.App.component.htmlの中身をこれに書き換える

<app-main-nav>
  <router-outlet></router-outlet>
</app-main-nav>

8.main-nav.component.htmlのってところに

<ng-content></ng-content>

を書き加える。