## Getting Started with Google Material Design (March 2018)

March 12 2018 by [Chris](/content/chris@techdevsolutions.com)

Always start with some basic housekeeping by running the following:
`npm install -g npm` and
`npm install -g @angular/cli`

For this tutorial, I used npm version 5.7.1 and @angular/cli version 1.7.3. Also, this guide uses many parts from [Angular Material's Getting Started Guide](https://material.angular.io/guide/getting-started).

To start out, go to your projects folder and run:
`ng new basicMaterial`

After it's fully done installing, open your favorite IDE (i.e. [IntelliJ](https://www.jetbrains.com/idea/download)) and open the package.json file and add the following to the "dependencies" section (as opposed to the "devDependencies" section):

```
...
"@angular/material": "5.2.4",
"@angular/animations": "5.2.4",
"@angular/cdk": "5.2.4",
"hammerjs": "2.0.8",
...
```

**Note:** Feel free to use '^' or '~' in front the versions to automatically update the package the next time you build your project (or by running an npm install).

Next, we need to add certain Angular Material modules to the app.module.ts file. For learning purposes, it's fine to include a bunch of modules that you don't actually use, however in a production environment, you should only include the modules that you actually use for proper [tree shaking](https://kbtechbook.wordpress.com/2017/06/10/ahead-of-time-compilation-and-tree-shaking-for-angular-2-application-using-angularcli-and-rollup-js/). Below should be a relatively complete list of all the Angular Material modules.

```
...
imports: [\
  BrowserModule,\
  FormsModule,\
  ReactiveFormsModule,\
  BrowserAnimationsModule,\
  MatCheckboxModule,\
  MatCheckboxModule,\
  MatButtonModule,\
  MatInputModule,\
  MatAutocompleteModule,\
  MatDatepickerModule,\
  MatFormFieldModule,\
  MatRadioModule,\
  MatSelectModule,\
  MatSliderModule,\
  MatSlideToggleModule,\
  MatMenuModule,\
  MatSidenavModule,\
  MatToolbarModule,\
  MatListModule,\
  MatGridListModule,\
  MatCardModule,\
  MatStepperModule,\
  MatTabsModule,\
  MatExpansionModule,\
  MatButtonToggleModule,\
  MatChipsModule,\
  MatIconModule,\
  MatProgressSpinnerModule,\
  MatProgressBarModule,\
  MatDialogModule,\
  MatTooltipModule,\
  MatSnackBarModule,\
  MatTableModule,\
  MatSortModule,\
  MatPaginatorModule,\
  MatNativeDateModule\
],
...
```

Add the following import to the main styles.css file:

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

Add the following two link tags your index.html:

```
...
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
...
```

Finally, add the following section tag before any code in any of your component views. This will style html basic tags with Material design's own style:

```
<section class="mat-typography">
...
</section>
```

Open app.component.css and add the following css:

```
.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

h1 {
  margin-top: 20px;
  margin-bottom: 20px;
}
```

Oepn app.component.html and add the following HTML:

```
<section class="mat-typography">
  <h1>Basic Header</h1>

<mat-tab label="Basic Forms">
    <form class="example-form">
      <mat-form-field class="example-full-width">
        <input type="text" matInput placeholder="Basic Text" value="">
      </mat-form-field>
    </form>
  </mat-tab>
</section>
```

At this point, if you haven't already, run `ng serve -o` from your terminal and try running the app. From this point on, I'd recommend try playing with different components found on [Angular Material's Components](https://material.angular.io/components/categories) page.