Hi Dharmen, Nice video! I was looking into material custom theming before I stumbled across your video. I was comparing bootstrap and material and I would appreciate your input on this. Thnaks!
They both serve different purposes. I don't think it's right to compare them. I mostly use bootstrap and angular material together. Bootstrap for layouts, etc and angular material for components.
For scss customisations, you can simply do it with Angular Material scss mixins and functions. I have created a new course for it, checkout angular-material.dev/courses/overview/m3-ng-components
Nice article. I have added system variables but I can see two :root{} in dev tools. one is my defined system variable and another one is a default one & that default one is not using system variables I have defined. what would be the reason?
Yes, it could be possible. Default ones are browser defaults. Are system variables not working? If you change any variable value, isn't it reflecting on UI?
- The qr-code is blocked by your face/camera - the git repo is not the same as the one you show in the video (not event the branches) - there are files and configs in the repo you use that you dont explain how you did it - there is no layout.component.theme in the repo (imported in @use ./app/core/layout/layout.component.theme as layout-theme) - since there is no layout.component.theme, the import gives error and the use of "layout-theme" later causes error as well - you dont show what you have in the file layout.component.theme
- QR code covered, but upon scanning opens the correct repo. I think you already landed on the correct repo, otherwise you would not have mentioned about code mismatch - initial code is the same, branch is changed due to other updates after uploading the video. But as you could not figure out, I will tell you, it's main-for-tilconf - layout component theme file is at github.com/shhdharmen/tilconf-m3-angular/blob/main-for-tilconf/src%2Fapp%2Fcore%2Flayout%2F_layout.component.theme.scss, simply clone the repo, it should run fine - the changes mentioned in the video are not pushed anywhere, they are easy changes and can be done easily by watching this video Let me know if you need any more help
(if you are running Nx with esbuild, this wont work out of the box) The course and your project does not work for esbuild. I'm using esbuild with Nx and obvisly angular (very common practice) and one issue is hashing, but even if I consult for dark-theme- (regardless of the hash) still not working, I'm still trying to figure it out but it would be great if u add Nx with esbuild to the course, or a free video explaining it (which helps for maketing the course), so far I paid and can't make it work with the information you provided. Still, it's a great idea.
awesome video and good information, i think material and angular is a bit lacking on things like documentation. i just got the course an almost done i have some questions and clarifications and siggestions that might have confused me a bit.where can i ask or send you a message? thanks again
This is extremely useful, thank you very much sir! 😎
You're very welcome!
oh god, thank you !
I don't understand why Google and Angular di'nt create that builder !
it's amazing !
Thank you
Simply...amazing! I don't understand why Google did not create that builder for its own library😱
They have it. But it's not particularly for angular, a generic material design theme builder material-foundation.github.io/material-theme-builder/
Good job🎉 wishing you all the best for your future endeavours. 😊
Thank you 👍
Really thank you, I didn't try yet but thank you for this useful resources
Do try it out and let me know if you have any feedback.
This was really helpful, Thank youu
Glad it was helpful!
Hi Dharmen, Nice video! I was looking into material custom theming before I stumbled across your video. I was comparing bootstrap and material and I would appreciate your input on this. Thnaks!
They both serve different purposes. I don't think it's right to compare them.
I mostly use bootstrap and angular material together. Bootstrap for layouts, etc and angular material for components.
sir i have project already created with css how to change to scss for cutomizing theme
For scss customisations, you can simply do it with Angular Material scss mixins and functions. I have created a new course for it, checkout angular-material.dev/courses/overview/m3-ng-components
Nice, thank you
Welcome
Nice article. I have added system variables but I can see two :root{} in dev tools. one is my defined system variable and another one is a default one & that default one is not using system variables I have defined. what would be the reason?
Yes, it could be possible. Default ones are browser defaults. Are system variables not working? If you change any variable value, isn't it reflecting on UI?
- The qr-code is blocked by your face/camera
- the git repo is not the same as the one you show in the video (not event the branches)
- there are files and configs in the repo you use that you dont explain how you did it
- there is no layout.component.theme in the repo (imported in @use ./app/core/layout/layout.component.theme as layout-theme)
- since there is no layout.component.theme, the import gives error and the use of "layout-theme" later causes error as well
- you dont show what you have in the file layout.component.theme
- QR code covered, but upon scanning opens the correct repo. I think you already landed on the correct repo, otherwise you would not have mentioned about code mismatch
- initial code is the same, branch is changed due to other updates after uploading the video. But as you could not figure out, I will tell you, it's main-for-tilconf
- layout component theme file is at github.com/shhdharmen/tilconf-m3-angular/blob/main-for-tilconf/src%2Fapp%2Fcore%2Flayout%2F_layout.component.theme.scss, simply clone the repo, it should run fine
- the changes mentioned in the video are not pushed anywhere, they are easy changes and can be done easily by watching this video
Let me know if you need any more help
impressive
Thanks
(if you are running Nx with esbuild, this wont work out of the box)
The course and your project does not work for esbuild. I'm using esbuild with Nx and obvisly angular (very common practice) and one issue is hashing, but even if I consult for dark-theme- (regardless of the hash) still not working, I'm still trying to figure it out but it would be great if u add Nx with esbuild to the course, or a free video explaining it (which helps for maketing the course), so far I paid and can't make it work with the information you provided.
Still, it's a great idea.
If you have already purchased theme-builder, I can try to help. Please drop email to support@angular-material.dev.
awesome video and good information, i think material and angular is a bit lacking on things like documentation. i just got the course an almost done i have some questions and clarifications and siggestions that might have confused me a bit.where can i ask or send you a message? thanks again
@@DirtySouth33T you can send email at support@angular-material.dev, or drop a message on twitter @ngMaterialDev