Angular Material with Angular 9

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

9. Reference
 https://material.angular.io/

10. 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