Angular Material

AngularJS Material is a completely new framework as it has shifted the coding to Typescript. However, from an architectural point of view Angularjs2.
Has most of the architectural component from such as module, directive, dependency injection, service, change detection and modularity.
Angular JS Team released Angular 2.0.
This framework which cannot work with mobile development, therefore,  Modern Web Components with Angularjs 1.x was not very straight-forward.


Angular2.0 should have one module which acts as the root module and conventionally named as AppModule.


it is a main interesting feature and this section lest create two component and communicate with them.

The first component is AppComponent which will pass a list of people object to another component called ‘PeopleComponent’ to show a list of the person on the card.

The steps to create a component is very simple.


They allow you to develop code for specific tasks that can be used in those components.
An Angular 2 service is simply a javascript function, along with its associated properties and methods, that can be included (via dependency injection) into Angular 2 components.


It is possible that the same DOM element may have a number of directives.
In case of a component, it is not possible, any DOM element can have only a single component.
Along with component also have two other kinds of directives such as Structural directives and Attribute Directive. The Directives are used to change the behavior as well as a layout of the Document Object Model elements.

UI Components :

Form Controls, Navigation, Layout, Buttons & Indicators, Popup & Modals, Data table.
A set of the project provides reusable, accessible and well-tested UI components based on Material.
 In Angular Material, There are two ways to use

1. Local Installation –

download the Angular Material libraries using npm, jspm, local machine and include it in your HTML code.

2. CDN Based Version –

The (CDN) Content Delivery Network. angular-material.min.css and angular-material js files set your HTML code directly.
Angular Cli Commands
require the NodeJS installation on our system
npm install -g @angular/cli
ng new project name
cd project
ng serve

Leave a Reply