Angular Material 2

Reward your app with

high-quality UI

in minutes

How to...

Maxim Salnikov

@webmaxru

  • Google Developer Expert in Angular

  • AngularJS Oslo Meetup organizer

  • Mobileera.Rocks conf organizer

Products from the future

UI Engineer at ForgeRock

Material Design

Material is the metaphor

Bold, graphic, intentional

Motion provides meaning

20+ Components

Visual Language

Implementations

Material UI

Materialize

Material Design Lite

Angular Material

A set of high-quality UI components

Internationalized and accessible

Performant

Customizable

Well-documented

Cross-platform

Angular 2

A complete application development framework platform

*SOON* (really)

Performant

Scalable

Adopts TypeScript

Tooling

Angular Material 2

α.8

Upcoming features

More components

Better testing

API docs / Guides

Component toolkit

New features /

Better testing

Unit

E2E

Performance

Screenshots

Accessibility

New features /

Component toolkit

Overlays

Gestures

Responsive

Accessibility

More cool

things

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.

Resources

Today's demo

Angular Material 2

Coding fun

Thank you!

@webmaxru

Maxim Salnikov

Backup slide

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.

  • 1,989