HOW TO THEME ANGULAR MATERIAL APPS

TOMAS HERICH

FRONTEND ARCHITECT

  • many years of experience
  • contract work, startups, ...
  • frontend focus
  • frameworks & build tools
  • blog and github
  • reddit addict

BASED ON BLOG POST

ANGULAR MATERIAL

  • Still in beta (2.0.0-beta.8)
  • A lot of components and more are coming
  • Great theming support!
  • Optimized for Angular (eg OnPush)
  • High quality (internationalization, accessibility)

THEMING USE CASES

  • Corporate theme
  • Branding for multi tenancy products
  • Theme per product / department
  • User individualization / customization
  • Night mode
  • Possibly many others...

ANGULAR MATERIAL THEMES

  • Flexible
  • All native components
  • Support for custom components
  • Multi-theme support
  • Light & dark themes out of the box

it's better to see once than hear a hundred times

THAT'S RIGHT

IT'S LIVE CODING TIME

MISSING DOCS

MISSING DOCS pt2

HOPEFULLY WE'VE MADE IT

WE LEARNED

  • How to install and use Angular Material
  • Include pre-built themes
  • Anatomy of a theme
  • Theme variables, light & dark themes
  • How to create & use custom theme
  • Using multiple custom themes
  • Overlay components handling
  • Custom components theming
  • Caveats

RESOURCES

TOMAS HERICH

FRONTEND ARCHITECT

THANK YOU

I HOPE YOU ENJOYED THE PRESENTATION

Angular Material Theming

By Tomáš Trajan

Angular Material Theming

Angular Material is official material design component library for Angular. It already provides great number of polished components out of the box. This enables developers to focus on core business features instead of creating basic components while maintaining flexibility to add what's necessary. Library comes with amazing theming capabilities which enables you to progressively customize way your application looks like. This theming support also really shines in common multi-tenancy branding use case.

  • 3,894
Loading comments...

More from Tomáš Trajan