Material Design in practice with AngularJS

on YouTube ↗46m

" summary

Material Design principles get implemented with Angular Material on top of AngularJS, using flexbox-based layout attributes (layout, layout-align, flex with responsive breakpoints), theme palettes (primary 500/700 and accent), and UI primitives like buttons, cards, dialogs, toasts and side navs. The demo compares Angular Material to Polymer/paper elements and shows a Gravitar example implemented as an Angular directive vs a web component, highlighting ripples and elevation (1dp sheets, shadows, animation timing) and available sample code.

AI-written summary · about

" chapters (26)

1. 0:00Start
2. 7:07Core Functionality
3. 8:45Light and Shadow
4. 9:47Material Properties
5. 12:45Animation
6. 12:58Visual Feedback
7. 14:10Color Palettes and Themes
8. 14:33Color Palettes
9. 15:21Tool Bars
10. 16:54Angularjs
11. 17:56First Implementation of Material Design
12. 18:09Paper Elements
13. 19:24Difference between Polymer and Angular
14. 21:10Angular
15. 22:06Polymer Custom Custom Elements
16. 23:22Angular Material Directives
17. 24:22Button Demo
18. 24:52Container Elements
19. 25:57Child Alignment
20. 28:19Responsive Layout
21. 29:14Services
22. 29:55Sample Apps
23. 37:17Demos
24. 38:46Left Nav Bar
25. 41:15Toggle Left
26. 45:39Resources

" related talks

• 48mAn Introduction Into Using Angular’s Material DesignTracy Lee · NDC Sydney 2017
• 21mBuild an Angular Material AppThomas Burleson, Naomi Black · ng-conf 2015
• 31mAngular Material 2Elad Bezalel · AngularUP 2016
• 20mThoughtful Component DesignJeremy Elbourn, Miles Malerba · ng-conf 2017
• 34mAngular Material 2: Reward your app with high-quality UI in minutesMaxim Salnikov · Angular Camp 2016
• 19mCreating Beautiful Experiences Fast with Angular MaterialStefanie Trimble Fluin · ng-europe 2018
• 06mFuture-Proof Angular Material Styling in 5 MinutesKasia Biernat-Kluba · NG Poland 2025
• 56mBlast Off with Angular MaterialRachel Noccioli · ng-conf 2019