Total guide to Theming Angular Material Apps (Live Coding Video Tutorial)
ฝัง
- เผยแพร่เมื่อ 21 ต.ค. 2024
- Follow me on Twitter: / tomastrajan
Angular Material is official material design component library for Angular. It 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.
Slides: slides.com/toma...
GitHub (Video code example): github.com/tom...
GitHub (Starter Project): github.com/tom...
Blog post: / the-complete-guide-to-...
Demo project: tomastrajan.gi...
Twitter: / tomastrajan
Angular Elements / Microfrontends library: angular-extens...
Also check out my simple tiny state management library for Angular...
ngx-model : github.com/tom...
![[LIVE] : ONE ลุมพินี 83 วันนี้!! คู่เอก "พันฤทธิ์ vs ซุปเปอร์บอล วันของโอม MBK"](http://i.ytimg.com/vi/1b4pkKHa_Fk/mqdefault.jpg)
Thank you... I've spent 2 days trying to go decipher the crappy documentation for theming custom components. It really helped seeing it all together and explained well.
Best tutorial on theming! I know because I have watched them all
A complete guide... no one else provided in youtube
Such a good vid. Filled the blanks in the documentation.
You just saved me from going mad. Thanks man!
This is super helpful. Thank you very much for this video tutorial.
Happy that it helped!
I would love to see an updated version of this. Although currently it has a way better documentation.
This is a great tutorial. The only suggestion I can offer is that you might like splitting it up into parts so we could just go to the part we wanted to learn about at a particular time.
Thank you for a tip will consider in the future!
awesome and right to the points. Thanks a ton!!!
Thank you very much for this video tutorial.
Very helpful.
hey very good tutorial but one question can we change out theme with mat menu button?
Hi, after the theming the mat-select background, and other angular material component background colors becomes transparent. In the _theming.scss file, at the mat-select-theme mixin the vscode highlights the map-get($theme, background) red.
Awesome video, the custom components themes helped alot.
Fantastic work buddy! But instead of the OverlayContainer i applied the theme mixin class to the 'body'-Tag element. But thank you very much for your help :)
Great tutorial. Saved me oodles of time.
oh my god.. finally got this !!!1
thanks bro
very helpful. excellent work!
Great covering!
Much needed! Thanks.
thanks for the great video. However, I still don't know what is the right way to color a component when the desired component is not part of any pre-defined and custom palette? Could someone please explain this? should I extend $mat-light-theme-foreground for example?
Thanks a lot, the official "guide" didn't help at all, you saved me a lot of time :)
Happy that ig helped!
19:25 Where can I find the OverlayContainer? I'm using angular-material v6.4.1.
Switch Theme so easy. Great!!!
Hey this tutorial is fantastic! I'm curious how it would be possible to change themes with the md-slide-toggle instead of md-select being on a different component. Any tips?
That would work the same, only limitation would be you can just switch between two themes. If you cant pass custom value to toggle you van map true / false to your themes in change handler.
Completely stumped. But i'll keep looking into it. I'm fairly new to Angular :) thanks for the tip
hi tomas,
i cant use Md commends in app.module.ts file... is there any changes in syntax or what ? its suggest me a Mat commend... are they same thing ? thx again
I think it changed to mat
What is the editor you're using?
Intellij IDEA, payed but well worth it!
Superb !
why shouldn't i use hardcoded colours in my css? (minute 33.55)
Because if you used hard-coded colors, there’s be no point in trying to switch themes/colors, which is what this was all about.
great vid!
thanks for the video, helped a lot. But about the child selectors, (and element selectors in general), just use classes
Thanks a lot!
is there any materila avilable, how to use these SASS style, in production mode
They are automatically compiled into css during the build when using Angualr CLI you don't have to do anything extra by yourself
Hi Tomas,
thanks for the reply,
my question is - if i built an app with two themes and trying sell it as product, if one customer likes to have a dark and other light
how to load these themes specific to customer, while building
Your advice is really appreciated :)
Thanks Tomas - You saved my day, but I have a question. I would like my primary color to = #3297B6 instead of $my-theme-primary: mat-palette($mat-grey); - Can you or somebody else help me, plz?
Hey Simon!
thr best way would be to drfine your own palette. You can create $my-company-pallete variable with content similar to mat-blur or grey or whatever. That way you will define all the shades and contrast colors for your specific color scheme. Also feel free to define $my-company-blue, $my-company-whatever based on your need to use as primary, accent and warn respectively.
Hope this helps 😉
Thank you Tomas, you're great! I have to ask - If you should make a suggestion on how to get as close as possible to the color # 3297B6 how would it look like? plz :)
I figured it out Tomas - have a nice day
prntscr.com/gssyw1
im getting that error when i try to define custom theme,
any solution?
Looks like the stuff you're passing in the map-get() function is not correct, cant say just from screenshot.
prntscr.com/gstcce as u can see i followed your code,
also, can u explain or point me somewhere where i can learn how to make and use different variations of color, for example if i say , how can i make and use different versions of primary like primary-light or something like that...i would really appreciate if u could help me with that..thanks in advance
Yeah that screenshot looks good, hard to know why it didn't find the helper functions, maybe try the first import to the ./node_modules@angular/ ... instead of ~@angular. Of course do it so that its the path that is valid for you. For different versions of color on native material components you have to create a special theme file for them as you would for your own components. Or just pass numbers like 500, 700 etc to mat-palette selector when defining $primary color of your theme
Im not sure but I think it might be an issue with angular 5 and the current version of angular material. I am also getting the same error.
So I looked through the theming.scss file a bit and all I can gather is that in $color: map-get($palette, $hue); $palette is not a map type for some reason.
this is outdated for angular material 2, for after minute 20 of this video check material.angular.io/guide/theming