Angular - Material - Getting Started

Getting Started With Material

The first step is to install angular material into your project.

1. Download angular materials

I executed this at c:\dev\bulletinUi – but I suspect it wasn’t nessesary where I installed this.

npm install –save @angular/material @angular/cdk @angular/animations

Then I executed

ng add @angular/material

Indigo/pink
N for HammerJs – gesture support
Y for Browser Animations

to install angular into my project.

2. styles.css modifications

Added indigo-pink.css reference to styles.css

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

Now you can start integrating material tags into your project. In this case, I’m going to change my bulletin control from just showing a title and a body into something resembling a card.

3. Index.html modifications

I modified the body tag

1
2
3

<body class="mat-app-background">
  <app-root></app-root>
</body>

This is necessary for a lot of the material tagging to work.

4. bulletin.module.ts modifications

Add MatCardModule import statement (import { MatCardModule, MatCard} from ‘@angular/material’;)
Add (MatCardModule) to imports clause
Add (matCard) to exports clause

5. Bulletin-Grid modifications

I changed

<div *ngFor="let bulletin of bulletins">
        {{bulletin.title}}
        <br>
        {{bulletin.bodyPreview}}
        <hr>
</div>

<div *ngFor="let bulletin of bulletins">
<mat-card >
  <mat-card-title>
    {{bulletin.title}}
  </mat-card-title>
  <mat-card-content>
    {{bulletin.bodyPreview}}
  </mat-card-content>
</mat-card><br>
</div>