Skip to main content

What Is Angular Material and How to Use it ?

What is the angular material?

Angular Material could be a UI component library for Angular developers. Angular Material provides modern UI components that work across mobile, web and desktop. Angular Material to facilitate the development process through reusability of common components like Cards, beautiful Inputs, Data Tables, and so on.
The angular Material style could be a specification for a unified system of visual, motion, and interaction design that adapts across different devices and different screen sizes. It is creating faster, beautiful, and responsive websites.

Steps to install Angular Material:

  • Step 1: Install the Angular CLI
  • Step 2: Create a workspace for Angular Project
  • Step 3: Install Angular Material, Angular CDK and Angular Animations
  • Step 4: Configure animations
  • Step 5: Import the Angular Material component modules
  • Step 6: Gesture Support

In detail information about steps to install Angular Material:

Step 1: Install the Angular CLI

installed the Angular CLI globally using npm:
 npm install -g @angular/cli

Step 2: Create a workspace for Angular Project

To create a new workspace:
ng new angular-material-app

Step 3: Install Angular Material, Angular CDK and Angular Animations

npm install @angular/material @angular/cdk @angular/animations --save
Using the Angular CLI ng the add command will update your Angular project with the correct dependencies, perform configuration changes and execute initialization code.
ng add @angular/material

Step 4: Configure animations

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

export class AppModule { }

Step 5: Import the Angular Material component modules

Imports the Angular Material component modules which you need in App.
Below are a few examples.
import { MatAutocompleteModule, MatButtonModule, MatCheckboxModule, MatDatepickerModule, 
MatFormFieldModule, MatInputModule, MatRadioModule, MatSelectModule, MatSliderModule, 
MatSlideToggleModule } from '@angular/material';

@NgModule({
imports: [
     MatAutocompleteModule,
     MatButtonModule,
     MatCheckboxModule,
     MatDatepickerModule,
     MatFormFieldModule,
     MatInputModule,
     MatRadioModule,
     MatSelectModule,
     MatSliderModule,
     MatSlideToggleModule
 ]})

Examples:

Checkbox

<mat-checkbox>Check me!</mat-checkbox>

Radio Button

<mat-radio-group>
   <mat-radio-button value="1">Male</mat-radio-button>
   <mat-radio-button value="2">Female</mat-radio-button>
</mat-radio-group>

Input

<mat-form-field class="col-12">
   <input matInput placeholder="Name" value="Tudip">
</mat-form-field>

Button

<button mat-raised-button>Click Me</button>

Card

<mat-card>Material Card</mat-card>

Outputhow-to-install-angular-material

Step 6: Gesture Support

Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures.
In order to urge the complete feature-set of those elements, HammerJS should be loaded into the appliance.
 npm install hammerjs --save
Complete installing HammerJS then import it on ‘main.ts’ file
import 'hammerjs';

Comments

Post a Comment

Popular posts from this blog

Angular Architecture

Angular Architecture is divided into different parts like Component, Template, Directive, Service, and Module. Before you start to develop your application, you should have knowledge about the purpose of each part of the application. So that you can make your application smoother and faster. Below is the figure of angular architecture. Angular Architecture In this chapter, we will see each term in detail. Module Angular Applications are modular and Angular has its own modularity system called NgModule. Every Angular application has at least one class with a @NgModule decorator, it is the root module, conventionally named as AppModule. To use any component into an application you need to declare it into the related module. Angular Module is class with a @NgModule decorator. Code Snippet of Angular Module The most important properties of @NgModule are : declarations:  declaration property contains a li
2 comments
Read more

How to start a new Angular 9 Project in a few easy steps

How to start a new Angular 9 Project in a few easy steps In order to successfully create and run an Angular project locally, the following three software must be installed on your machine. VScode  [ Link ] Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux, and macOS. It includes support for debugging, embedded Git control and GitHub, syntax highlighting, intelligent code completion, snippets, and code refactoring. Node  [ Link ] Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser. npm  [ Link ] npm is the world’s largest software registry. Open-source developers from every continent use npm to share and borrow packages and many organizations use npm to manage private development as well. 1 — Install Software 1.1 — Install Visual Studio Code In order to write code, we must use an IDE, and Microsoft has developed an open-source and cross-platform IDE that can
Post a Comment
Read more

Benefits of Learning Angular

Benefits of Learning Angular There’s a lot of platforms and tools out there, so what makes Angular so special? What sort of advantages does it bring to the table, that it’s so important for developers to know its ins and outs? Here are some of Angular’s most impressive advantages: Less Coding The best code is short but effective, getting the most functionality with expending the least effort. Fortunately, Angular supports Model View Controlling architecture (MVC). All the developer needs to do is split their code to fit into the MVC architecture, and Angular takes care of the rest! No worries about having to do the MVC pipeline. Ease of Integration There’s a host of frameworks out there that have Angular already built into them, including Kendo UI, Wijmo, and Ionic, to name a few. That just goes to show that Angular plays well with others. Single Page Applications Supported A Single Page Applications is defined as a web application that loads a single HTML page. The page
Post a Comment
Read more