Відео

I found the solution and share it..: <mat-sidenav opened mode="side" #sidenavElement [style.width]="sideNavWidth()" (mouseover)="collapsed.set(false)" (mouseout)="collapsed.set(true)" >

Thanks Andres! Glad you found it helpful ☺️

👍👍

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.

You are most welcome, Paschal! If you're looking for mentoring, you can email me at consult@zoaibkhan.com - and I'll try to help you out as much as possible :)

Also check out my recent followup to this - where I add the nested menu items functionality as well ua-cam.com/video/u83tICIfLWc/v-deo.html

What other tricks do you have up your sleeve im hooked. ​@@ZoaibKhan

Will this work in Angular 17 and 18 probably right? You are using standalone components

@@BlackbirdStudiosBXL yes, the nested one esp was made in v18

Glad it was helpful! :)

Alright, noted! Thanks for the input

I'm doing the same myself! Single file components actually help you in that direction because you know when the component is getting too large

Yes, it should work

Have you added the outline icons to index.html?

@@ZoaibKhan Yes, of course!

I finally fix it! Thanks a lot 💙💙

@@davoodsoleimani9482 Great! :)

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

Thanks for your comment...

Glad you found it useful! ☺️

Material 2, because I didn't change anything when upgrading from v16 to v18. Would be interesting to try it out though - the menu items might display bit differently in material 3

@@ZoaibKhan Thank you for your reply. Like many others I'm trying to upgrade to M3 and found it very challenging, as there is no clear, beginner-friendly documentation available. Your content has been immensely helpful, and an M3 version of your excellent rail/sidenav would be even more helpful. Thanks again.

Ok, let me try it out by upgrading to M3. Could be an interesting topic for a video :) Meanwhile, I hope you've gone through the official docs on migrating to M3: material.angular.io/guide/material-2-theming#how-to-migrate-an-app-from-material-2-to-material-3

@@ZoaibKhan That would be great. Yes I have gone through the documentation, like I said I found it very challenging, and I'm slightly put out by guidance starting off with "ultimately it is up to you".

@@H2-oe4cu haha, yeah it is confusing! Thanks for your input

It is a signal, Mohan! Signal values are accessed just like you're calling a function. As we move forward with the new changes in Angular and Zoneless apps, using signals in templates is the recommended approach!

@@ZoaibKhan oh , Thanks for the clarification 🙌

Thanks man! Glad you're finding it useful :) Everything we create goes through a process so it's important to understand the process as well, so that we can learn lessons for the future! Thanks for your input

@@ZoaibKhan I trully love your content! It is super easy to follow, it does feel like you always know what you are doing and not just "guessing" like a lot of people! your channel is super instructive! new subscriber here! Could please make a tutorial on how to properly migrate to angular 18 from older versions of angular? like angular 16 to angular 18, for example. I've tried doing it and there are always so many errors, problems with installed libraries because of versions support, etc., plus, the older versions of angular managed all components as a non-standalone, so everything went into a app.module.ts huge file with all services, components, custom pipes, etc. With no configuration for hydration and what not, so how is it done? :( I'd really appreaciate it! and i'm sure a lot of people will too! thank you so much for all your work!

Well, a little secret: I had to record this video multiple times, because the first time I made a lot of mistakes which would've caused a lot of confusion. But that's just the process all of us creators have to go through :) Thanks for the subscribe and I hope you find more value here. About your suggestions, that is another frequently asked topic. And the only reason I haven't yet created a video on upgrade guide to latest version is because of its complexity. I recently upgraded one of my client's apps to the newest version - and from upgrading material to standalone to routing/state and third party libraries - it can get messy pretty quickly. But I've it in my list of todos - and hopefully will get to create one soon. I have an older chat app in Angular - maybe that would be a good cast study to follow for an upgrade to the latest version :)

@@ZoaibKhan I can tell you put a lot of effort into the videos! It makes it really pleasant to watch and listen to! thank you very much!

You're welcome 🤗 About material 3, it's going to change the look and feel of the sidebar a bit, so I'm not sure. Currently it is mimicking the UA-cam studio sidebar

Ok, those are common issues, so I've noted them for future videos.

Hello :) you mean you want to remove the auto scroll functionality?

Thanks 🙏

Thanks man!

Here you go with the whole playlist: ua-cam.com/play/PLHbz-DWIAPJDxWTyoq0O2v4T3AO5W94vl.html

@@ZoaibKhan Thanks. In #2 it talks about starting the app in a previous video (on authentication) . Can you share that too please? Thanks.

@@to15108 ua-cam.com/play/PLHbz-DWIAPJAkAKmKr4AkIeqUgnvcxLXF.html&si=Lpld0vZBov9mYQO1

Oops, apologies for that! Will try to adjust audio if possible. Glad to know you found the video helpful :)

No, only event handlers/listeners. Other browser events are not monkey patched because no zone js

Thanks Khizer! 1) No, you'd have to call markForCheck manually in the subscription block to trigger CD and render 2) Free VPN - zenmate 3) Sure, you can email at consult@zoaibkhan.com - I have a consultation option on my Upwork page as well

So you basically keep the state opened by default and then open and close using styles?

@@ZoaibKhan the toggle still works, just it is initially open and clicking or tapping on mobile outside of the sidenav - does not close it, it is only controlled by the menu mat-icon

@@MonaCodeLisa aah, so you're using the "side" mode instead of the "over" mode. It works for me in that case as well. The issue comes up when for smaller screens I need to make it work in "over" mode with backdrop click enabled.

@@ZoaibKhan I am still using both, I am using the mediaquery matches, so desktop is "side" and turns into "over" for mobile, I keep all that Angular Material provides for me :) and the only thing I remove is the data binding there to set it to open as default state when page loads

Glad you found it useful! :)

Noted :)

Thanks man 🙏

Oh, nice way of finding out all design tokens! Thanks for the input 🙏

Glad you liked it! The host component binding is the best way currently to bind attributes and css classes on the component with signals. That's why I've used it here in this way.

Thanks Kannan! Any special topics you might be interested in?

Thanks Kostas! 🙏

Thanks 🙏

It should get better on this count with design tokens and easier customization! :)

Thanks for your concern and I can understand. I do explain the exact process I followed, so if you'd like you can follow the same and come up with your own version of it. I spent time and energy on it, so... :) If you're a student and need the code, you can also drop me an email at consult@zoaibkhan.com and I can provide you a discount. P.S. Your support helps me sustain the channel and keep making useful content. Thanks again for your interest, Cheers

I appreciate your reply, although I don't agree with you. Sharing is caring, you are putting a simple demo behind a paywall, a demo....is not even an application for production use. It's like you created a delicious meal and you are putting a price for the recipe instead of sharing it with the community so others can learn and modify it and everyone wins, or setting a price for a response on Stackoverflow for someone in need. In any case, that's how you role, fine. You have lost a subscriber, there are other youtubers, certificate Angular developers experts that share in their videos their demos, not asking for a price. Good luck with your channel

That's fine, sometimes we agree to disagree. It's a nice analogy though about the recipe. The thing is I've already given away the recipe in this and the previous video for FREE - so you can come up with your dish yourself if you want :) And if you want to taste the dish (as you said), I added a link to a LIVE deployment of the Theme Builder App after the video was published (in the description and an in video card). But yeah I did it after publishing, so it might have escaped your notice. It's given below again: easy-material-theming.vercel.app/ So hope that helps. And I wish you all the best in your learning journey! And I also respect all the other youtubers and content creators who give their time and energy to teaching others. Thanks for expressing your opinion here :)

Oh, I haven't looked at it in detail myself. Can you share some of the clever stuff there? :)

@@ZoaibKhan It converts the promise if given to an observable, flattens it, uses DestroyRef, which I have never heard of to unsubscribe on destroy, peaks on the initial value in an untracked scope to avoid recursion, does the computation in an untracked scope, and gives back a computed signal based on the objeservable's next value. Its a little bit confusing because it tries to handle a lot of function signatures in the same function

@@KostasOreopoulos Wow, that's quite a lot! Respect for the maintainers increased even more :)

Glad you liked it! ☺️

Well, the SSR support in Angular is getting better with every release, but AnalogJS still has an edge in terms of features like file based routing and built in markdown support. So I guess its more about DX for content focused sites such as blogs and such.

@@ZoaibKhan ah okay nice then I will try it out 🔥

Yes, it is possible to do so by setting the primary or other color values under the relevant selector. So when color="accent" property is set, angular material adds the '.mat-accent' class to the button. So you can modify the theming file to target body plus the .mat-accent selector: --accent: red; body .mat-accent { --primary: var(--accent); } And then add another --accent variable as above. Note, you don't need to specify each token and assign it to accent, you can simply change any of the six variables to whatever you need for the accent style. You can also create your own component in angular e.g. like an accent-button, which specificially sets the primary color to your accent color. This is the flexibility that CSS variables provide! Let me know if you need more help - I'll be glad to explain in a video perhaps.

@@ZoaibKhan Thanks for the quick reply! I'm not sure if this is working as expected. I've set this up and it doesn't seem to be taking the changed value of the --primary variable. Using the Button page on the material documentation as an example. Basic, Primary, Warn and Link are the correct color but the Accent button remains whatever the default material style sheet is set to. Below is the info from the dev tools for that accent button in the example .mat-accent.mat-mdc-button-base { --mdc-text-button-label-text-color: #343dff; --mdc-protected-button-label-text-color: #343dff; --mdc-filled-button-container-color: #343dff; --mdc-filled-button-label-text-color: #ffffff; --mdc-outlined-button-label-text-color: #343dff; --mat-text-button-state-layer-color: #343dff; --mat-text-button-ripple-color: rgba(52, 61, 255, 0.12); --mat-protected-button-state-layer-color: #343dff; --mat-protected-button-ripple-color: rgba(52, 61, 255, 0.12); --mat-filled-button-state-layer-color: #ffffff; --mat-filled-button-ripple-color: rgba(255, 255, 255, 0.12); --mat-outlined-button-state-layer-color: #343dff; --mat-outlined-button-ripple-color: rgba(52, 61, 255, 0.12); } body .mat-accent { --primary: var(--accent); } --accent: #F7C245;

​@@kieransharpe4532 It'll be a difficult to discuss here. If possible, please send me a stackblitz or GitHub repo link on consult@zoaibkhan.com - so I can see what the problem might be

Yes, there is a mention of them being "stable" in the FAQs for v17 and a schematic to be provided in case they change before being stable. v17.material.angular.io/guide/material-3#can-i-depend-on-the-css-custom-property-names-being-stable

@@ZoaibKhan thank you again. You got my subscription. I have been looking at lots of Angular videos and your channel must be one of the best.

@@raul834 🙏

That's odd. I generated the m3 theme file in the video with the v18 RC version, so let me check it again with the v18 release and get back

Update: I just tried with latest v18 release and it seems to be working fine. Perhaps clear all node modules and try again?

@@ZoaibKhan Hey thanks for testing that out. I'll try a fresh project rather than the existing app I just upgraded from 17 and see what happens and report back when I get a moment. Again, thanks for your video (and all the other ones!).

@@ZoaibKhan I was providing the primary, secondary, tertiary and neutral colors. I narrowed it down to if you provide a neutral color, then the schematic doesn't generate those extra 10 colors for the neutral palette. I'm not sure if that's a bug or what but it's good enough for now.

@@hooped8907 thanks for the update!