STEP_1.md

Quick Jump

• Initial Setup
• Step 1 <-
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6
• Step 7
• Step 8
• Step 9
• Step 10

Step #1 Task:

Here you will install Angular Material in your Angular application.

• Import MaterialModule from @angular/material and use it inside the imports
• Since Angular Material depends on animations, the BrowserAnimationsModule needs to be included as well.

Since we will also be using flexbox CSS, let's also include the @angular/flex-layout library.

npm install @angular/material @angular/flex-layout --save

Modify the following files to use Angular Material and FlexLayout in the application.

File: src/app/app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { FlexLayoutModule } from '@angular/flex-layout';

import {
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatDialogModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatSelectModule,
  MatSidenavModule,
  MatSlideToggleModule,
  MatTabsModule,
  MatToolbarModule
} from '@angular/material';

import {AppComponent} from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,

    // Material
    MatButtonModule,
    MatCardModule,
    MatCheckboxModule,
    MatDialogModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatSelectModule,
    MatSidenavModule,
    MatSlideToggleModule,
    MatTabsModule,
    MatToolbarModule,

    // Flex-layout
    FlexLayoutModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

File: src/styles.css

@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import "https://fonts.googleapis.com/css?family=Material+Icons";
@import "https://fonts.googleapis.com/css?family=Roboto:400,300";

html, body {
  display: flex;
  flex-direction: column;

  font-family: Roboto, Arial, sans-serif;
  margin: 0;
  height: 100%;
}

Tips

1. FlexLayout + Body

We use flex properties on the html and body because they are not part of what markup <app-root>Loading...</app-root> that Angular bootstraps. This can be easily enough be fixed when bootstraping a component that has body as selector.

File: src/app/app.component.ts

@Component({
  selector: 'body',
  template: '<h1> {{title}} </h1>'
})
export class AppComponent {
  title = 'Angular Material Workshop';
}

2. Themes

We import a prebuilt theme file, read Theming your Angular Material app for more info

---

Go to Tutorial Step 2