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

Made with Slides.com