Articles and Courses about Material Design in Angular. Created by @shhdharmen
Everything Angular Material βοΈ
Joined August 2023
- Tweets702
- Following5
- Followers518
- Likes422
Angular Material Dev retweeted
Put bg-gray-900 on a mat-toolbar and nothing happens?
New: an Angular Material Γ Tailwind CSS skill for your AI coding agent. It knows where each style belongs, how mat overrides work, and how to make dark mode apply to both.
#Angular #TailwindCSS
Your AI agent writes Angular Material + Tailwind code that looks right the first time.
New skill from Angular Material Blocks:
β Brand colours via overrides
β One dark mode switch for both
β Contrast-checked shades
β Full override token list
ui.angular-material.dev/docsβ¦
Angular Material Dev retweeted
π @ngxpert/hot-toast v7 is out β now supporting Angular 22!
Same lightweight, customizable toast notifications you know, upgraded for the latest Angular.
Upgrade:
ng update @ngxpert/hot-toast
π¦ github.com/ngxpert/hot-toast
π ngxpert.github.io/hot-toast
Angular Material Dev retweeted
Angular Material v22's new showProgress/progressIndicator slot on matButton means you can now drop Mat Expressive's loading indicator straight into your buttons π
No custom directive needed β just project it in.
See it live π
Nice timing from @angular π
Material v22 added a progressIndicator slot on buttons β and Mat Expressive's loading indicator drops right in.
Material 3 Expressive Loading Indicator in your button, zero boilerplate.
Live demo: expressive.angular-material.β¦
Angular Material Dev retweeted
Nice timing from @angular π
Material v22 added a progressIndicator slot on buttons β and Mat Expressive's loading indicator drops right in.
Material 3 Expressive Loading Indicator in your button, zero boilerplate.
Live demo: expressive.angular-material.β¦
Say goodbye to custom spinner wrappers πβ¨
In the latest Angular Material update, MatButton natively supports showing progress indicators. Control loading states with the showProgress input and project spinners easily.
Clean, accessible, and built-in (PR github.com/angular/componentβ¦) π―
Angular Material Dev retweeted
Angular Material Blocks now supports Angular v22 π
β
Every block, template & library migrated
β
OnPush-by-default handled β rendering unchanged
β
Still SSR/SSG friendly
Details: ui.angular-material.dev/blogβ¦
Angular Material Dev retweeted
Angular Material Blocks now supports Angular v22 π
β
Every block, template & library migrated
β
OnPush-by-default handled β rendering unchanged
β
Still SSR/SSG friendly
Details: ui.angular-material.dev/blogβ¦
Angular Material Dev retweeted
Have you tried this Material 3 Expressive Design layer for your angular material applications?
Any feedbacks or thoughts?
Angular Material Dev retweeted
Yesterday we launched Mat Expressive β Material 3 Expressive components and motion, layered on top of Angular Material.
Today, a closer look at each component in action π§΅
Angular Material Dev retweeted
Launch Day π
Mat Expressive brings Material 3 Expressive to your #Angular Material apps β styles, directives, and new components layered on top. Not a fork, not a replacement.
ng add @ngm-dev/mat-exp
Read the announcement π
expressive.angular-material.β¦
Angular Material Dev retweeted
Our "Angular Material Theming System" course is now available on @YouTube!
#angular #angularmaterial #webdev
Angular Material Dev retweeted
Biggest ever discount for #Angular Material Blocks!
Valid till 31st March!
Includes:
β
300+ Angular Material UI blocks
β
Dashboard & application templates
β
Marketing sections
β
Application shells & layouts
β
CLI to install blocks directly into your project
β
MCP support
βοΈ Summer Sale is live!
Get 50% OFF Angular Material Blocks & Templates.
Built for Angular 21 + Angular Material + Tailwind CSS.
Production-ready UI blocks, templates, and CLI.
β³ Ends March 31
Get the deal: ui.angular-material.dev/#priβ¦
Angular Material Dev retweeted
π‘ Big update in #Angular Material Blocks
You can now buy individual templates β no need to purchase the full bundle.
Perfect if you only need one production-ready dashboard.
Browse templates: ui.angular-material.dev/tempβ¦
Angular Material Dev retweeted
π New Template in Angular Material Blocks
Introducing Overview β a modern dashboard template with advanced charts, tables, and analytics views.
Built with Angular 21, Angular Material 21 & Tailwind CSS.
π Preview
template-overview.angular-maβ¦
π¦ Details
ui.angular-material.dev/tempβ¦
Angular Material Dev retweeted
π
°οΈπ’ Check out the 46th issue of the @AngularAddicts newsletter: Angular 21.1, Skills, Signal Forms & more
angularaddicts.com/p/angularβ¦
@shhdharmen @brandontroberts @cedric_exbrayat @alfrodo_perez @nivekcode @NetanelBasal @Armandotrue @juristr @AdrianRoOmanski
Angular Material Dev retweeted
It's easy to use #Angular Material's system tokens with #TailwindCSS
1. ng add @angular/material
2. ng add tailwindcss
3. Update tailwindcss theme to use mat system tokens
4. Start using classes like bg-primary, bg-primary/10, etc.
Links in 1st comment!
ALT @import "tailwindcss"; @theme inline { --color-primary: var(--mat-sys-primary); --color-on-primary: var(--mat-sys-on-primary); --color-primary-container: var(--mat-sys-primary-container); --color-on-primary-container: var(--mat-sys-on-primary-container); /* other colors */ }
Angular Material Dev retweeted
π¨ Angular v21 Support Announcement
All blocks and templates in Angular Material Blocks have been updated to support Angular 21.
No breaking changes. No hacks. Just clean, production-ready UI building blocks.
Read the announcement π ui.angular-material.dev/blogβ¦
Angular Material Dev retweeted
New blocks just dropped π
Introducing Flyout Menus for Angular β built with Angular CDK Overlay, Angular Material, and Tailwind CSS.
Perfect for navs, mega menus, pricing flyouts, and more.
π ui.angular-material.dev/blocβ¦
Angular Material Dev retweeted
Angular CDK Overlay is powerfulβbut animations are where it really shines.
I wrote a deep dive on implementing enter/exit animations with CDK Overlay, without hacks or fragile CSS.
Read here β angular-material.dev/articleβ¦
#Angular #Frontend #UX
ALT Photo generatd by Nano Banana. Link to prompt: https://gemini.google.com/share/f7f8bc41cb65
Angular Material Dev retweeted
New article β¨
Implement Enter / Exit animations using Angular CDK Overlayβclean, reusable, and production-ready.
Covers animation patterns, lifecycle hooks, and real-world use cases π
angular-material.dev/articleβ¦
#Angular #AngularCDK #WebAnimations
ALT Photo generatd by Nano Banana. Link to prompt: https://gemini.google.com/share/f7f8bc41cb65
Angular Material Dev retweeted
π¨ Angular v21 Support Announcement
All blocks and templates in #Angular Material Blocks have been updated to support Angular 21.
No breaking changes. No hacks. Just clean, production-ready UI building blocks.
Check it out π ui.angular-material.dev/blogβ¦
