Tanveer Ahmad

Frontend Developer Software Developer || Fascinated by tech trends || Building usable systems that work on web and mobile.

Angular Material

application-programming-interface

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 { }

Angular Material  – Card

The <mat-card>, an Angular Directive, is used to create a card with material design styling and animation capabilities. It provides preset styles for the common card sections.

  • <mat-card-title> − Represents the section for title.
  • <mat-card-subtitle> − Represents the section for subtitles.
  • <mat-card-content> − Represents the section for content.
  • <mat-card-actions> − Represents the section for actions.
  • <mat-card-footer> − Represents the section for footer.

Following is the content of the modified module descriptor app.module.ts.

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

Following is the content of the modified HTML component file app.component.html.

<mat-card class = "ex-card">
   <mat-card-header>
      <div mat-card-avatar class = "ex-header-image"></div>
      <mat-card-title>HTML5</mat-card-title>
      <mat-card-subtitle>HTML Basics</mat-card-subtitle>
   </mat-card-header>
   <img mat-card-image src = "/image/path… .png">
   <mat-card-content>
      <p>
Lorem Ipsum is simply a dummy text of the printing and typesetting      industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      </p>
   </mat-card-content>
   <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
   </mat-card-actions>
</mat-card>

Following is the content of the modified CSS file app.component.css.

.ex-card {
   max-width: 400px;
}
.ex-header-image {
   background-image: url('/image/path…. .png');
   background-size: cover;
}

LINK FOR <mat-card> :- https://material.angular.io/components/card/examples

Share