How to Add Angular Material in an Angular App

Angular Material is a library of UI components. Angular Material offers cutting-edge user interface components that are compatible with desktop, online, and mobile platforms. By reusing common components like cards, attractive inputs, data tables, and so forth, Angular Material can speed up the development process.

Oct 23, 2024 - 07:28
Oct 25, 2024 - 07:46
 0  11
How to Add Angular Material in an Angular App
Angular Material, Programming, thetechfoyer,thetechfoyer.com

The angular Material style might serve as a blueprint for a cohesive visual, motion, and interaction design system that works with a variety of screens and devices. It is producing websites that are responsive, appealing, and speedier.


Install Angular Material, Angular CDK and Angular Animations
npm install @angular/material @angular/cdk @angular/animations --save
npm cache clean --force


Update Material Dependencies
Use following command to update your Angular project with the correct dependencies, perform configuration changes and execute initialization code.
ng add @angular/material
this will ask few questions about your choice, asnwer it as per your requirement.


Import the Angular Material component modules and configure animations
Create a folder shared under the app folder. In the shared folder, create a file named material.module.ts:

if the Angular/material version is less than or equal 8.0.0 the import

if Material version is higher than 8, Import statements should be more sepecific


 




Import this module into our app.module.ts :

Create Angular Material Layout

What's Your Reaction?

like

dislike

love

funny

angry

sad

wow

Deepak Talwar Technical Architect and Full Stack Developer with 18+ years of Professional Experience in Microsoft Technologies & PHP Platform. Hands on experience with C#, VB, ASP.NET, ASP.NET MVC, ASP.NET Core, ASP.NET Web API, Linq, ADO.NET, Entity Framework, Entity Framework Core, Sql Server, MYSQL, NoSql, Javascript, Angular, jQuery, AWS, Azure, React, Angular, Laravel, Codeingiter, Serenity, VBA, Cloud Computing, Microservices, Design Patterns, Software Architecture, Web Design and Development.