Видео

Just creating a simple function will do the trick in this case. The bookIds current value can be used to send to the function and it will update the results.

@@ZoaibKhan so I have api call in two different places and I need to set it to same signal in my case it is a read-only signal from toSignal

Check out the video on explicit effect, you'll need to use a writable signal and update it using an effect in that case.

?

Sure, you can try to. But it's not meant to be a navigation bar and will require lots of modification in styling e.g.

I think that's covered in the 3rd video in the playlist - link to which you can find in the description.

Glad you liked it Prajin!

Aah, you mean the host binding in components?

Thanks Ian, in part to you as well :)

Hey Allen! Thanks for all the support. It really means a lot :) And do let me know if you have any suggestions for future content/videos

​@@ZoaibKhan its Adam :) I would love to know your thoughts on a couple of things. How would you approach a multi layout project, where admin and user both have your sidenav with their own dashboard example /admin/dashboard & /app/dashboard but then you have a public layout that has a nav bar across the header like bootstrap almost with login/reset password etc.... Would you make a base layout and extend that in the admin/user layouts and override the menu at the component level? I also would love to you how your thoughts on proper project layout for example you use pages/dashboard then you have components like components/sidenav, when you have a project that gets very large do you see benefits from this type layout I have a project that each page is basically a components and then it has a module that barrels the sub components. I have a core module that wraps and barrels interceptors and things like that and the i have shared/services/models and things of that nature. Thanks Zoaib!

Oh, sorry for that, Adam :) For a multi layout project, there are multiple ways to do this. One is what you suggested, keep a sidenav and the header in the base layout. Then we use some flag in our state in a service (or signal store, whatever) and show and hide them according to the flag. The other option is to just add the sidenav where needed - so you don't need it in the public facing one - so you can keep a parent component for the authenticated routes only (with an auth guard obviously). Maybe naming it as AuthenticatedLayout And keep the other one as the PublicLayout - with the boostrap like header as parent there. I like the second one, personally. Just seems a bit more organized and will allow you to protect the admin and user routes as well using auth guards. For the project structure, I'd kept pages to contain the top level components linked to routes. And the components basically contain reusable parts of those pages - so things like e.g. common buttons, form control elements, things which are shared. About keeping sub components in a separate module (assuming they're NgModules), the only downside is lack of tree shaking - and which is also the problem with the infamous shared modules that've been very common in the Angular world. Devs just end up adding any common stuff there and it keeps getting imported everywhere - unnecessarily bloating up pages when we don't need them. We can keep barrel files though - and also arrays of shared components to use in components when we need a bunch of them. Being mindful that a lot of unrelated stuff is not stuffed into one place. So yeah, that's a short overview. Hope that helps :)

​@@ZoaibKhan awesome answers Thank you so much!! I hear ya on the shared component getting put everywhere LOL!!! i might have done that but now that we have standalone its forcing me to rethink this which is a good thing :) Thanks again brother I look forward to your next video! :)

You're welcome :)

I'd suggest building up your portfolio of projects and taking freelance projects while you search for a vacancy

Hey Harsha! If you'd purchased the sidebar in the past, you should've got an email by now

@@ZoaibKhangot the mail ❤

Awesome! Enjoy 😊

You're welcome 🤗

Sounds great! Let me know if you need any clarification in the code. When I started with single file components, it felt a bit odd as well. But with time I can see the benefits - it helps me keep the component size small and templates manageable! Thanks for your comment :)

@@ZoaibKhan i am learning the smaller the component the easier tests are as well :)

Hey Rainer! Thanks to you for initiating the discussion on explicit effects. It's really helped me and others in understanding effects in a better way. More power :)

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?

It's using angular material 2 - which is default UpTo angular v17. From v18 onwards, it's material 3

Glad you liked it! The way to add the third level is the same as the second level, but added nesting. Or we could use recursion for it to enable even more levels. Let me look at the code a bit and get back to you :)

@@ZoaibKhan I’m happy to buy the next version too

No need for that. I'll send out the updated one for all those who have already bought it - when I get to update it :)

And here you go - support for multiple infinite levels added! Also, hope you don't min me mentioning you a bit in the video ruclips.net/video/Irf4aZC3LPY/видео.html P.S If you've not received the updated version, let me know. I'll send you a free coupon for it :)

You're welcome 🤗 That can be a great followup video, thanks for the suggestion :)

Yeah, content projection is a special way to change a part of the component's contents. But not sure if it fits in with communicating with a component like an input does.

Who's she? 🤔

Oh, I got it 😂😂 Thanks for the comment 😊

@@ZoaibKhan Haha, yeah I lied. Never called her 😉 Anyway, if you are looking for video ideas... I found myself implementing stuff/components a second time, not remembering that I had implemented the exact same thing 1-2 years ago. That happened multiple times. So, having some nice searchable documentation about my (nx) repo would be really nice. That would help preventing re-implementing stuff. So, maybe you could do a video about documentation?

Hmm, interesting. You're referring to documentation generators?

@@ZoaibKhan for example, yes

You're welcome, Steve!

Glad that you found it so! 🙏

Welcome 🤗

Just use loadComponent in place of component in the routes file and the routes should be lazily loaded automatically!

I can send you a free coupon. Send me an email on consult@zoaibkhan.com and we'll take it from there :)

@@ZoaibKhan thanks a lot

Glad it was helpful!

Glad you found it helpful ☺️

You're welcome! I'm working on a free modern Angular 18 Crash course to introduce developers to the latest Angular features, so that should be helpful :)

Are you using the material 3 guide? Because the syntax has changed a bit

You're welcome, Micheal! I've avoided using effects for the most part till now. Weirdly, I was using toObservable here before as it seemed to be the easiest way to do what I wanted without getting into effects 😀 I think more official guidance is needed for these very common use cases!

Thanks Greg! I'm glad you found this useful ☺️

Yeah, that's a good option, but judging from Alex's answer on that GitHub issue, they're not considering it at least for now. But maybe in the future

@@ZoaibKhan do you think it's doable. I think some other frameworks like solid js have these kinds of functions

Yes, of course. It depends on the Angular team and what they're thinking about it. For now, it seems there are no plans for it, so we'll have to go with community contributions :)

Thanks for your comment! I prefer using single file components (SFCs) and keeping my components small for various reasons.

It's a signal, not a function :)

You're welcome :)

Check out the angular docs at angular.dev! You add the validations right on the field e.g. required, minlength etc.

Well, it depends! Different apps have different requirements. So while dynamically changing colors at runtime might not be required by one app, another one might need it. Not that we can't do it with material 2 - there are workarounds, but too complicated at least for my liking. But it's a matter of perspective, that was just my view about the problems I came across. Thanks for your input!

Hey Ayush! Since you're a student, just send me a message using the contact feature at the bottom of my shop page here buymeacoffee.com/zoaibkhan/extras And I'll send you a discount code for any of the items that you need :) Hope that helps in your learning journey

It's part of my Udemy course, so the code is part of it unfortunately.

Hey Ayush! Thanks for the detailed feedback :) A course is in the pipeline related to Angular Material - where I'm planning to create a full fledged app using Angular Material - so that should cover that. But it'll be paid and probably on Udemy. That's a good idea about role based login - I'll note it for the future videos. For youtube, I plan to create a Modern Angular 18 Crash Course soon - which will be a complete CRUD app - but may not use material (maybe tailwindcss)

@@ZoaibKhan hi can you send us the link for the udemy course. I love the way you are doing your videos i am trying to get better wiht angular in general

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

Perfect! One improvement might be to delay the mouse out a bit and wait for the user to be truly out of the sidenav and then collapse it. To prevent mistakes...

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 :)