Getting Started with Angular5 and Angular Materials

Introduction

In this article, I am going to explain how to set up a new Angular5 project and integrate Angular materials into it.

Getting Started

So first, open up a new console page, and type the following command lines:

• node -v: to check Node Js version or if it's unrecognizable, you can go to https://nodejs.org/en/download/ to download it
• npm -v: for Node Package Manager version

npm install @angular/cli -v, and then once it's installed, you can type ng -v to check Angular version number

(If you already have Angular 4 installed and you got this error: Your global Angular CLI version is greater than your local, just go to your dir home remove the node_modukes from there and run npm install again, or as an alternative, you can run those command lines:

npm uninstall -g angular-cli
npm cache clean
npm install -g @angular/cli@latest

Later on, I'm going to create our new first project on Visual Studio Code:

ng new angular5 --style=scss --routing
cd angular5 
ng serve

To generate new components, just run:

ng generate component home or simply ng g c home (if you get "more than one module matches" error, just run command like mentioned below):

How to Integrate Angular Material

As you know, there have been little updates on angular materials, so just follow these steps to install it by using npm or simply go to the website and follow up instructions at https://material.angular.io/guide/getting-started.

Step 1: Install Angular Material and Angular CDK

$ npm install --save @angular/material @angular/cd

Step 2: Animations

npm install --save @angular/animations

And then, go to app.module.ts and add the following imports:

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

@NgModule({
  ...
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})

Step 3: Include a theme

On style.scss, add the following import decorator:

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

Step 4: Gesture Support

npm install --save hammerjs

And then, go to main.ts, import it on your app's entry point and add this:

import 'hammerjs';

Step 5 (Optional): Add Material Icons

If you want to use mat-icon, you need to add this on index.html:

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

FinalStep: Import the component Modules

Import the NgModule for each component you want to use:

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

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

So Let's Test This Out

So here we go, let's try our first component and try to integrate a checkbox. You can simply do these steps:

1. Integrate this file on app.module.ts or in the separate typescript file that you need to import it on app.module.ts
2. import {MatCheckboxModule} from '@angular/material/checkbox';
3. Html code: <mat-checkbox>Check me</mat-checkbox>
4. TS file:

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

/**
 * @title Basic checkboxes
 */
@Component({
  selector: 'checkbox-overview-example',
  templateUrl: 'checkbox-overview-example.html',
})
export class CheckboxOverviewExample {}

For any questions, please leave a comment below. Thank you for reading!