Angular Material
Reward your app with
high-quality UI
in minutes
Maxim Salnikov
@webmaxru
-
Google Developer Expert in Angular
-
Angular Oslo Meetup organizer
-
ngVikings Conference organizer
Products from the future
UI Engineer at ForgeRock
Google Experts are a global network of experienced product strategists, designers, developers and marketing professionals actively supporting developers, startups and companies changing the world through web and mobile applications.
Google Developer
Experts
How to...
Material Design
Material is the metaphor
Bold, graphic, intentional
Motion provides meaning
20+ Components
Visual Language
Implementations
Material UI
Materialize
Material Design Lite
Angular
A complete application development
frameworkplatform
Angular Material
A set of high-quality UI components
Internationalized and accessible
Performant
Customizable
Well-documented
Cross-platform
Angular Material
b.3
Why to use?
Quick UI bootsrapping
Check the best practices
Essential choice for "materialized" apps
Foundation for UI libs
Upcoming features
More components
Better testing
API docs / Guides
Common UI / Component toolkit
New features /
Better testing
Unit
E2E
Performance
Screenshots
Accessibility
New features /
Common UI toolkit
Overlays
Gestures
Responsive
Accessibility
More cool
things
Mini-workshop time!
Tour of Material Heroes
Original
Materialized
http://bit.ly/material-workshop
Accessibility
A product is accessible when all people – regardless of ability – can navigate it, understand it, and use it successfully. Products should aim to be accessible to the widest possible audience.
WAI-ARIA
ARIA Roles
main
article
banner
...
ARIA States and Properties
aria-hidden
aria-invalid
aria-disabled
aria-valuemin
...
Resources
Angular Material
Thank you!
@webmaxru
Maxim Salnikov
Angular Material 2: Reward your app with high-quality UI in minutes
By Maxim Salnikov
Angular Material 2: Reward your app with high-quality UI in minutes
Our amazing web applications need high-quality UI components. So we have Angular 2 app on one hand and Material Design visual language on another. How to combine these without calling designer and spending days on struggling with CSS cross-platform issues and re-inventing client-side code for common UI scenarios? Right! Angular Material 2, set of reusable, well-tested, and accessible UI components, is going to solve this issue. It's still under active development but we can look behind the scenes and create our cross-platform, UI-rich app just in minutes. Let's go exploring and coding! Bonus: after our app is created we'll check its Accessibility, how it's automagically added by Angular Material 2 to allow users of all abilities to navigate, understand, and use our UI successfully.
