SlideShare a Scribd company logo

Angular material

•
•
K
Kalpesh Satasiya

This document discusses Angular Material, an UI component library for building attractive and consistent Angular applications. It provides modern components that work across devices and are optimized for Angular. To use Angular Material, install it via the Angular CLI and add Material components to templates. It includes features like typography, themes, and schematics to generate common components.

Convert to study guideBETA

Transform any presentation into a summarized study guide, highlighting the most important points and key insights.

1 of 10
Downloaded 22 times
Angular Material Kalpesh Satasiya Microsoft MVP, Blogger, Mentor Co-Founder, FutureStack Solution
Agenda  What is Angular Material  Prerequisites  Features  Add Angular Material to Application  Typography  Component Schematics
What is Angular Material  UI component library  Help in building attractive, consistent web application Material UI React Angular Material Angular Vuetify Vue
Prerequisites  Html  JavaScript  Basic knowledge of Angular
Features  Modern UI components that work across the web, mobile, and desktop.  Fast and Consistent  Tuned performance, Fully tested across modern browser.  Versatile  Themeable  Optimized for Angular  Built by the Angular team to integrate seamlessly with Angular.
Add Angular Material to Application  ng add @angular/material  It will install Angular Material, Component Dev Kit (CDK) and Angular Animations
What is typography?  Typography is a way of arranging type to make text legible, readable, and appealing when displayed.  Based on the guidelines from the Material Design spec and is arranged into typography levels  Each level has a font-size, line-height and font-weight  .mat-display-4  .mat-display-3  …..  .mat-h1  .mat-h2  ….  .mat-body  .mat-small  …
Component Schematics  Multiple schematics that can be used to easily generate Material Design components  ng generate @angular/material:nav my-nav  ng generate @angular/material:table my-table  ng generate @angular/material:dashboard my-dashboard  ng generate @angular/material:address-form my-form  ng generate @angular/material:tree my-tree CDK  ng generate @angular/cdk:drag-drop my-drap-drop
Reference  https://material.angular.io/
Thank You!  Kalpesh Satasiya  Email: Kalpesh@futurestacksolution.com  Blog: http://www.tech-coder.com  Company: https://www.futurestacksolution.com  YouTube: https://bit.ly/2LRoom4  Twiller: @Satasiyakalpesh

More Related Content

Angular material

  • 1. Angular Material Kalpesh Satasiya Microsoft MVP, Blogger, Mentor Co-Founder, FutureStack Solution
  • 2. Agenda  What is Angular Material  Prerequisites  Features  Add Angular Material to Application  Typography  Component Schematics
  • 3. What is Angular Material  UI component library  Help in building attractive, consistent web application Material UI React Angular Material Angular Vuetify Vue
  • 4. Prerequisites  Html  JavaScript  Basic knowledge of Angular
  • 5. Features  Modern UI components that work across the web, mobile, and desktop.  Fast and Consistent  Tuned performance, Fully tested across modern browser.  Versatile  Themeable  Optimized for Angular  Built by the Angular team to integrate seamlessly with Angular.
  • 6. Add Angular Material to Application  ng add @angular/material  It will install Angular Material, Component Dev Kit (CDK) and Angular Animations
  • 7. What is typography?  Typography is a way of arranging type to make text legible, readable, and appealing when displayed.  Based on the guidelines from the Material Design spec and is arranged into typography levels  Each level has a font-size, line-height and font-weight  .mat-display-4  .mat-display-3  …..  .mat-h1  .mat-h2  ….  .mat-body  .mat-small  …
  • 8. Component Schematics  Multiple schematics that can be used to easily generate Material Design components  ng generate @angular/material:nav my-nav  ng generate @angular/material:table my-table  ng generate @angular/material:dashboard my-dashboard  ng generate @angular/material:address-form my-form  ng generate @angular/material:tree my-tree CDK  ng generate @angular/cdk:drag-drop my-drap-drop
  • 10. Thank You!  Kalpesh Satasiya  Email: [email protected]  Blog: http://www.tech-coder.com  Company: https://www.futurestacksolution.com  YouTube: https://bit.ly/2LRoom4  Twiller: @Satasiyakalpesh