Create a YouTube sidebar clone with Angular Material Components! (Part 2)
Вставка
- Опубліковано 21 жов 2023
- #Angular #Sidebar #collapses
Get the final code from my shop!
www.buymeacoffee.com/zoaibkha...
📽️ Full stack Angular + Firebase course (50% off):
www.udemy.com/course/angular-...
✍️Blog version of the complete tutorial:
zoaibkhan.com/blog/youtube-st...
In this series of videos, I'll be showing you how to create a UA-cam sidebar clone using Angular Material Components!
Follow for more Angular tutorials, tips and tricks:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Cheers :) - Наука та технологія
Perfect!! mate, thank you! u saved my day
You're welcome 🤗
Thanks for sharing! 👏
You're welcome 🤗
Greate tutorial. Thanks for sharing.
Glad it was helpful, Daniel! Will be posting the third and last part soon as well :)
Great !!! Thanks a lot !!!
You are welcome!
Hope your new part soon !!!!
Hopefully coming up today!
in this add nested sidebar submenues
Yup, I'll be creating a video on this as well. Stay tuned
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 ...
How would it be done in separate components?
You can use output in nested container and event handler in parent to handle toggle state
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
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.
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 👌👌
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