Angular Material
Reward your app with
high-quality UI
in minutes
Maxim Salnikov
Maxim Salnikov
@webmaxru
-
Google Developer Expert in Angular
-
Mobile Oslo / Angular Oslo / PWA Oslo meetups organizer
-
ngVikings conference organizer
Products from the future
UI Engineer at ForgeRock
Material Design
Material is the metaphor
Bold, graphic, intentional
Motion provides meaning
Unified system
Guidelines
Icons
Tools
Components
Device metrics
Color tool
Remixer
Material Components
Material Components
-
Production-ready with best-in-class performance
-
Strict adherence to Material Design guidelines
-
Seamless integration with JS frameworks
More implementations
Material-UI
Materialize
MDL
React Toolbox
Vue Material
Vuetify
Angular Material
A set of high-quality UI components built with Angular and TypeScript, following the Material Design spec
beta.11
High-quality
-
Performant
-
Customizable
-
Cross-platform
-
Well-architected
-
Well-documented
-
Well-tested
-
Internationalized
-
Accessible
Why & where to use
-
Quick UI bootstrapping
-
Essential choice for "materialized" apps
-
Check the best practices
Components
And more...
-
Typography
-
Theming your custom components
-
Foundation for own UI libraries
Overlays
Gestures
Responsive
Accessibility
Unstyled
components
Component Dev Kit
Tour of Stylish Heroes
http://bit.ly/stylish-heroes
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.
Accessibility
ARIA Roles
main
article
banner
...
ARIA States and Properties
aria-hidden
aria-invalid
aria-disabled
aria-valuemin
...
WAI-ARIA
Thank you!
@webmaxru
Maxim Salnikov
Angular Material: Reward your app with high-quality UI in minutes
By Maxim Salnikov
Angular Material: 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.
