Angular Material

Angular Material is a UI component library for Angular developers. Angular Material components assist in constructing attractive, consistent, and functional web pages and internet applications while adhering to fashionable web layout standards like browser portability, device independence, and sleek degradation. It enables in growing faster, beautiful, and responsive websites. It is stimulated through the Google Material Design.

Following are a few salient features of Angular Material 😕

In-built responsive designing.
Standard CSS with minimal footprint.
Includes new versions of not unusual consumer interface controls inclusive of buttons, take a look at boxes, and textual content fields which might be adapted to follow Material Design concepts.
Includes superior and specialized functions like cards, toolbar, speed dial, aspect nav, swipe, and so on.
Cross-browser, and can be used to create reusable web components.

Angular Material – Environment Setup

Prepare a development environment to start your work with Angular Framework and Angular Material. We require the following ?

Nodejs
Npm
Angular CLI

Nodejs

set up nodejs on your system. To set up nodejs, go to the homepage https://nodejs.Org/en/download/ of nodejs and install the package primarily based on your OS.

To test if node js is mounted to your system, kind node -v inside the terminal. This will assist you notice the version of node js currently installed to your system.

C:\>node -v
V8.11.3

NPM

Install the required package. Once nodejs is established, npm can even get set up in conjunction with it. To check if npm is installed or not, type npm -v in the terminal. It should display the version of the npm.

C:\>npm -v
6.0.1

Angular CLI

Angular installations are quite simple with the help of angular CLI. Visit the homepage https://cli.Angular.Io/ of angular to get the reference of the command.

Type npm install -g @angular/cli, to install angular cli on your system.

Install Angular Material

REFERENCE LINK FOR LEARN ANGULAR MATERIAL :-
https://material.angular.io
https://material.angular.io/components/categories

To set up Angular Material in Angular challenge run following npm CLI command to put in Material, CDK and Animation packages.

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

Enable Animation For Material Components

Animations like smooth scrolling effect, ripple effect on button click need to be enabled or disabled by importing following modules.

In the app.module.ts file make the following changes:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

Add Material Theme

Components used in the project are styles using CSS available in the material CSS theme file, so just add the following theme file link in styles.css available at the project root.

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
@import "~@angular/material/prebuilt-themes/indigo-pink.css"; 
@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
@import "~@angular/material/prebuilt-themes/purple-green.css";

That’s it … we are done with Angular material configuration.

How To Use Material Components?

To use an Angular Material component like buttons, autocomplete, tabs, etc, first you need to add their modules on your project’s app.Module.Ts file. So that they may be to be had to each aspect under that module.

For example, if you need to use Material Buttons, import MatButtonModule then add in the imports array.

//app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { 
  MatButtonModule,
 } from '@angular/material';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
  MatButtonModule
 ],
  entryComponents: [
    DialogModalExampleComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }