Using Angular Material in an angular app with some best practices

Angular Material is a UI component library for angular.
Ok let's see how do you use this within an angular application using some of the best practices.

Prerequisites
1. Code editor (Ex: VS Code) installed
2. Node.js installed
3. Angular cli installed (https://cli.angular.io/)

I think you already know how to create a new angular application with Angular cli.
If you can't remember lets create a new angular app.

1. Create an angular app
Open the terminal and user command: ng new [name of your app]

2. Install angular material
Navigate inside your app with command prompt and run command: ng add @angular/material

When it prompts to install:
1. HammerJs for Gesture recognition: Select Yes
2. Setup browser animations: Select Yes

3. Create a module to hold angular material components
By creating a dedicate module for this will help to import all the required angular material components that we are going to use in the app within this module.
Then we can import this module in app.module.ts

Use command ng g m m shared\material --flat
Use --dry-run to see how the angular cli going to create your files.
--flat command will stop creating a folder with the same name of the module.

3.1. Import angular material components
In this blog we are going to test this with a simple button and checkbox component.
You can get the code for these component from the official angular material documentation.
Button: https://material.angular.io/components/button/overview
Check box: https://material.angular.io/components/checkbox/overview

4. Import the module in app.module.ts
The button component called MatButtonModule.
And the checkbox component called MatCheckBoxModule
So I import those.
Since this is a module to use angular material components, I used imports and exports and I removed declarations.

import { NgModule } from '@angular/core';

import { MatButtonModule, MatCheckboxModule } from '@angular/material'

@NgModule({

  imports: [

    MatButtonModule, 

    MatCheckboxModule

  ],

  exports: [

    MatButtonModule, 

    MatCheckboxModule

  ]

})

export class MaterialModule { }

5. Create new component to test our material components.
You can skip this step and do it inside the app.component.html as well. But I'll create a new component.

Use command: ng g c user\login
This will create a new component called login by creating a new folder inside app folder.

5.1. Add new component to app.component.html

<h1>Angular Material Test</h1>

<app-login></app-login>

6. Run the app to check everything is working
Use command: ng serve

When I click on the button it doesn't feels right.
And when I see the check box it's not that pretty.
That's because we are missing the theme.

7.  Import a Theme
This require to apply all of the core theme styles to our application.
So let's include a pre-built theme.

In order to set this through out our application I'm going to open the styles.css (inside app/styles.css) and import a pre-built theme css styles.

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

You can find more about pre-built themes go to: https://material.angular.io/guide/theming

Or you can navigate to node_modules => @angular => material => prebuilt-themes

There are 4 pre-built themes that you can use:

• deeppurple-amber.css
• indigo-pink.css
• pink-bluegrey.css
• purple-green.css

7.1. Save the changes and go to the browser

Now it is better. 

8. Add Angular Material Icons 

Go to index.html and include: 

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Then go to the material module that we have created and import: 

import { MatIconModule } from '@angular/material/icon';

Include this inside import and export as well.

You can find the icons from: https://material.io/resources/icons/?style=baseline

Then let's try adding one. 

<mat-icon>account_balance</mat-icon>

Save it and check in the browser. 

Happy coding :)