Click here to Skip to main content
13,408,284 members (41,307 online)
Click here to Skip to main content
Add your own
alternative version

Stats

4.2K views
4 bookmarked
Posted 4 Dec 2017

Getting Started with Angular5 and Angular Materials

, 5 Dec 2017
Rate this:
Please Sign up or sign in to vote.
It's an Angular 5 start up example for beginners

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!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Ben Ahmed Zohra
Tunisia Tunisia
Software Developer Engineer


You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180221.1 | Last Updated 5 Dec 2017
Article Copyright 2017 by Ben Ahmed Zohra
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid