I think that's because of the default material 3 theming. You can individually use the design token for the icon color to override with the primary color
Hi, nice tutorial, but in minute 10:07 i get the error: error NG8003: No directive found with exportAs 'routerLinkActive'. and crash the app. The function of active item doesnt works, any help?
nice tutorial. just one issue .. In my case i have a default.component and i have header footer and sidebar component in this case the click of menu button doesnt work ... will u be able to guide
@@ZoaibKhan did that and it worked however i noticed that when it collapses although the icons are showing properly .. there is a scrollbar at the bottom .. any ideas ?
Is it a horizontal scrollbar? Also, is it scrolling by small amount or more than that? Having the scroll usually means there is more content than what can be shown in that width. So you can try increasing the width a bit to accommodate any extra space so the scrollbar disappears. Or you can simply disable scroll by using overflow hidden instead of auto
@@ZoaibKhan Yes, it is a horizontal scrollbar, but why it appears just in my project, while I did all steps as you shown?! I set navbar's width to auto, and the width increased to about 100px, that is not nice for collapsed state!
@@davoodsoleimani9482 There must be some content which remains in the sidebar increasing its width to 100px. Make sure that content is not there in collapsed state
Thank you very much, this layout helped me a lot, but I am facing a problem when I click in Dashboard, the new component is opening in a new page, and not at the side of menu link. Do you have any idea why it is happening? do you think that the command --inline-template --inline-style can affect this? because I created only using the --standalone command. Thank you again.
No, it shouldn't have anything to do with inline styles and templates. You should check router outlet and where that is - it should be in sidenav content, so that the route components are opened there
Great tutorial.. Inside mat sidenav content I've requirement of loading multiple lazily loaded modules/routes whenever user clicks on that button. can you please help me with this?
Hi Khan I have a few things which don't match up. One thing is the profile picture seems to be not centered it is off to the left. Another thing is the sidenavbar has a very small height not taking up the full height available and lastly i don't get the highlight of the active route. Can you help please? I am loving your videos.
@ZoaibKhan are you available on a Consulting basis in an advisory role? 30 minutes or 1 hour per day to answer questions? I work for Ministry of Foreign Affairs in Belgium and we are moving all apps to Angular we are building reusable share libraries that will reside in a common separate repository that can be leveraged by any Angular App within the organization using single sign on common components services etc. In short are you available to coach us just a few minutes per day to support our efforts.
Hey, in version 18, the icons for Material are no longer colored when active....there is only the colored background....so it works as "active" but looks totaly different
Hey! if you want to have the same effect, you can override the following design token CSS variable in the menu item when the item is selected: --mdc-list-list-item-leading-icon-color I might do a video on this and other changes, but not sure when.
@@ZoaibKhan Thanks for your answer. First ive to change the default border-radius, and then change the color. This is how i made it: .mat-mdc-nav-list .mat-mdc-list-item { border-radius: 0; } .mat-mdc-nav-list .mat-mdc-list-item.mdc-list-item--activated { background-color: transparent; > mat-icon, span { color: #005cbb; } } It works. But I actually don't really like working "against" material.
@alnes204 that's why I suggested to use the specific design token CSS variable for the purpose. Overriding internal styles can break things in the future, but the design tokens will not change that much. That is a new feature introduced in v18
@@ZoaibKhan Hm, it seems not so easy. The icon color is easy to change, but the text color (in nested span) not so easy without messing with ng-deep or also internal classes.....So its a fight against material 😅
@alnes204 here's something to make it easier for you! The upcoming v19 material docs will contain a list of all design token variables so it's easier to see the options next.material.angular.io/components/but…
I can only guess the problem from here since I don't have your code. But seems you haven't set the width to be wide enough to contain the collapsed state?
I cannot show my other coponents in the router outlet in mat-sidenav-content, how can I solve this? (I have the main root, for example admin/dashboar, I want to show it in the router outlet in mat-sidenav-content.)
@@ahmetozden5220 did you set up the routes correctly? Once you do that, the component you give for that route should be rendered in place of the router outlet.
@@ZoaibKhan When I created the path:admin/analytics in app.routes.ts with a for loop, I created a series called menuItems as in the video and gave the route value and the analytics value, but when I do this, it opens on its own page, not where the sidebar is (I'm not talking about _blank). )
Beautiful Tutorial, 10:26 color is not changing for me tips pls, i am using angular18
I think that's because of the default material 3 theming. You can individually use the design token for the icon color to override with the primary color
@@ZoaibKhan Thankyou
Hi, nice tutorial, but in minute 10:07 i get the error: error NG8003: No directive found with exportAs 'routerLinkActive'. and crash the app. The function of active item doesnt works, any help?
RouterLinkActive directive is part of the RouterModule, you have that in the imports array right?
@@ZoaibKhan Is true 👌👌
Perfect!! mate, thank you! u saved my day
You're welcome 🤗
thanks ...
How would it be done in separate components?
You can use output in nested container and event handler in parent to handle toggle state
nice tutorial. just one issue .. In my case i have a default.component and i have header footer and sidebar component in this case the click of menu button doesnt work ... will u be able to guide
You can keep an output in the header which fires when button is clicked. Then use an event handler outside it to toggle the mode
@@ZoaibKhan did that and it worked however i noticed that when it collapses although the icons are showing properly .. there is a scrollbar at the bottom .. any ideas ?
In CSS styles, you must remove the img styles. I tried it and the image will be reduced.
/* img {
width: 100px;
height: 100px;
} */
Thanks a lot. I have a problem! When navbar collapsed, and it's width decreased to 64px, an scroll bar appears at bottom of navbar! how can I fix it?
Is it a horizontal scrollbar? Also, is it scrolling by small amount or more than that?
Having the scroll usually means there is more content than what can be shown in that width. So you can try increasing the width a bit to accommodate any extra space so the scrollbar disappears.
Or you can simply disable scroll by using overflow hidden instead of auto
@@ZoaibKhan Yes, it is a horizontal scrollbar, but why it appears just in my project, while I did all steps as you shown?!
I set navbar's width to auto, and the width increased to about 100px, that is not nice for collapsed state!
@@davoodsoleimani9482 There must be some content which remains in the sidebar increasing its width to 100px. Make sure that content is not there in collapsed state
Greate tutorial. Thanks for sharing.
Glad it was helpful, Daniel! Will be posting the third and last part soon as well :)
Thank you very much, this layout helped me a lot, but I am facing a problem when I click in Dashboard, the new component is opening in a new page, and not at the side of menu link. Do you have any idea why it is happening? do you think that the command --inline-template --inline-style can affect this? because I created only using the --standalone command.
Thank you again.
No, it shouldn't have anything to do with inline styles and templates. You should check router outlet and where that is - it should be in sidenav content, so that the route components are opened there
Great tutorial.. Inside mat sidenav content I've requirement of loading multiple lazily loaded modules/routes whenever user clicks on that button. can you please help me with this?
Just use loadComponent in place of component in the routes file and the routes should be lazily loaded automatically!
Hi Khan I have a few things which don't match up. One thing is the profile picture seems to be not centered it is off to the left. Another thing is the sidenavbar has a very small height not taking up the full height available and lastly i don't get the highlight of the active route. Can you help please? I am loving your videos.
I should also add that I have header and footer components and i'd like the hamburger to be in the header as opposed to right below it.
and where is the Dashboard and other MenuItems icon being set?
Please go through the styling part more closely, it seems you've missed out some CSS styles. E.g. the height of sidenav is set in the styles
It's in the menu items array signal defined in the sidenav component
@ZoaibKhan are you available on a Consulting basis in an advisory role? 30 minutes or 1 hour per day to answer questions? I work for Ministry of Foreign Affairs in Belgium and we are moving all apps to Angular we are building reusable share libraries that will reside in a common separate repository that can be leveraged by any Angular App within the organization using single sign on common components services etc. In short are you available to coach us just a few minutes per day to support our efforts.
Hey, in version 18, the icons for Material are no longer colored when active....there is only the colored background....so it works as "active" but looks totaly different
Hey! if you want to have the same effect, you can override the following design token CSS variable in the menu item when the item is selected:
--mdc-list-list-item-leading-icon-color
I might do a video on this and other changes, but not sure when.
@@ZoaibKhan Thanks for your answer.
First ive to change the default border-radius, and then change the color.
This is how i made it:
.mat-mdc-nav-list .mat-mdc-list-item {
border-radius: 0;
}
.mat-mdc-nav-list .mat-mdc-list-item.mdc-list-item--activated {
background-color: transparent;
> mat-icon,
span {
color: #005cbb;
}
}
It works. But I actually don't really like working "against" material.
@alnes204 that's why I suggested to use the specific design token CSS variable for the purpose. Overriding internal styles can break things in the future, but the design tokens will not change that much. That is a new feature introduced in v18
@@ZoaibKhan Hm, it seems not so easy. The icon color is easy to change, but the text color (in nested span) not so easy without messing with ng-deep or also internal classes.....So its a fight against material 😅
@alnes204 here's something to make it easier for you! The upcoming v19 material docs will contain a list of all design token variables so it's easier to see the options
next.material.angular.io/components/but…
in this add nested sidebar submenues
Yup, I'll be creating a video on this as well. Stay tuned
I have one small problem after collapsing the sidenav a horizontal scrollopsy appears
I can only guess the problem from here since I don't have your code. But seems you haven't set the width to be wide enough to contain the collapsed state?
Nicely explained
Thanks for sharing! 👏
You're welcome 🤗
I cannot show my other coponents in the router outlet in mat-sidenav-content, how can I solve this? (I have the main root, for example admin/dashboar, I want to show it in the router outlet in mat-sidenav-content.)
Could you show me some code so I can understand the layout and guide accordingly?
@@ZoaibKhan
For example, I want to run the admin/analytics root on the same page as the sidebar inside the router outlet.
@@ahmetozden5220 did you set up the routes correctly? Once you do that, the component you give for that route should be rendered in place of the router outlet.
@@ZoaibKhan When I created the path:admin/analytics in app.routes.ts with a for loop, I created a series called menuItems as in the video and gave the route value and the analytics value, but when I do this, it opens on its own page, not where the sidebar is (I'm not talking about _blank). )
I solved the problem, thank you for your attention
Great !!! Thanks a lot !!!
You are welcome!
Hope your new part soon !!!!
Hopefully coming up today!
Thankyou.
done ✅