Tomáš Trajan
I ❤️ building useful things! It involves code & design 🛠 Passionate about #Frontend, #typescript, #Angular, #Material #Design ! Obviously the bright Future 🌞
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.
