Join me as I teach you how to be a professional Angular developer by developing real world projects. I will also cover all the new changes coming up to Angular including the new Signals API, Deferrable views and other fun stuff! 🥳
So hit the subscribe button - and let's get coding together!
hai zoaib, you are doing a brilliant work in helping people like me, can you make a continuation of this same project with an addition of a dark mode toggler in the toolbar this time, in which when clicked the sun icon changes into a moon icon and vice versa?????
This is a good demonstration. I am a bit stuck on how to effectively handle errors from derivedFrom or derivedAsync. I used to have CatchError before with rxjs , now how to get the errors out of my API call using these new utilities? Bit confused
One way would be to have a standard request response object with some flags like pending, completed and error and return that as part of the result you're getting. Then you can handle the error at the service level and return the relevant flags. In the component then you just have to listen to those flags and show error or success based on it.
@@ZoaibKhan it was down somewhere on his Twitter feed but it was essentially looks like this section in NG extension derivedAsync "Contextual Observable Example" . I am not able to paste the links here in comments but that section gave me some ideas on how to handle errors however in my opinion there's gotta be a standalone section for error handling.
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.
I have not bought the source code, but i passed your videos many time and completed the Navigation Menu. Only one thing i could not do that, how to apply the color theme.
Thank you so much for this amazing tutorial on Angular! Your explanations were clear and really helped me understand the concepts better. I appreciate the effort you put into creating this content. Keep up the great work!
If you haven't already, a video on using the host {} in the Component header and the various elements you can set in it would be a good video. Reducing the # of DIVs is a great benefit for example
@@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! :)
that is awesome actualy, so this just made me change my mind on some things with my multi layout app. this just made it way cleaner i used the original videos for your sidebar with 1 level :) thanks man!
i just bought the theme to learn more, thanks for making it available I am creating my own that has a public page and admin and app layout hopefully i can learn more from the one i just bought! I look forward to more videos. I also am getting used to the idea of having small components nested in the .ts files I always though it was a good idea :)
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 :)
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?
great videos, i guess i am using a differnet version of material and things have changed a bit, what version should i be using for this video and the original ones?
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 :)
And here you go - support for multiple infinite levels added! Also, hope you don't min me mentioning you a bit in the video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Irf4aZC3LPY.html P.S If you've not received the updated version, let me know. I'll send you a free coupon for it :)
Worth to watch! Would like to improvise same app with sorting and checkbox functionalities in same manner as you suggested for better understanding and practice. Tons of thanks for the great & quality content. 😊
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.
@@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?
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?
Was searching for any projects that are made on angular 18, but i couldn't find one. This was the only tutorial that had the updated angular version used, Strongly recommended and suggested for people who are struggling to learn about the new angular features. Thanks Sir!!
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 :)
A lot of `effect` talk has gone over my head because of some of these tricky considerations. Even after using effects extensively, I have had assorted issue including circular stuff. And untracked made sense, but I kind of thought it was overkill. Despite that lack of understanding I sort of weighed in on that issue because I wanted a more explicit pattern because I think it is an easier to understand model. Alex's distinction gave some good context. But I think seeing this all explained with an example has helped. I will probably start using `explicitEffect` the next time I give effects a solid try again. Thanks for the video.
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!
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 :)
It was amazing, thank you!!! I'm so glad I found your channel :) I started learning Angular in my new job after a few years working with React and it's pretty hard, this tutorial was very helpful :)
thank you, very interesting. Out of the 3 complaints, I acknowledge the first one: the use of the SASS language, although it is quite straightforward. The other two are not relevant for me: the palettes can be generated by tier tools, and the dynamic requirement is not at all a required feature.
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!
Hi Zoaib, I am a first-year BCA student. It's difficult for us to make purchases, so if you can't provide the source codes for free, that's okay. But at least, like in your other tutorials, please provide the codes under the video tutorials so we can learn from them. I am learning a lot from your tutorials and hope you understand. Thank you!
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
Your video is the best source for learning Angular in a professional, real-world office context. It's very important for me. Could you please create a playlist for Angular Layout Design using Angular Material? This could include an Admin Dashboard, ngCharts, SideBar, Toolbar, Login, Registration Forms, Tables, Dialogs, Animations, and a Complete Project Design. This would help us learn with complete projects. Additionally, sometimes we face problems managing sessions when users are logged in. Could you cover what's safe and the right way to implement role-based login? It would be great if you could show how to display sidebars and content according to user roles after login. If you create a complete professional project, we will learn the actual coding patterns used in companies because no other RU-vidr explains the latest technologies in Angular like you do. Please make a complete project for learning and real use.
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
