Angular Material 2

Reward your app with

high-quality UI

in minutes

Maxim Salnikov

@webmaxru

  • Google Developer Expert in Angular

  • AngularJS 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 2

A complete application development framework platform

Angular 2

The Shiny Parts

The Pale Parts

2 years of development

Not backwards compatible

Bre

a

king

ch

ange

s

Performance

Ahead of Time compilation

Change detection

Server-side rendering

Web Workers

More awesomeness

Flexibility

Scalability

Reusability

Convenience

Angular Material

A set of high-quality UI components

Internationalized and accessible

Performant

Customizable

Well-documented

Cross-platform

Angular Material 2

α.10

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

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

Today's demo

Angular Material 2

Coding fun

Thank you!

@webmaxru

Maxim Salnikov

Cheatsheet

ng new angularmaterial2-guide-socalcodecamp
ng serve

ng generate class session

npm install --save @angular/material
npm install --save hammerjs

ng g service session
ng g component session-list
ng g component session-detail

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.

  • 2,839