Can't we just use angular mat tree component instead
@ZoaibKhanКүн бұрын
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.
@fayazvar3948Күн бұрын
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.
@ZoaibKhanКүн бұрын
I think that's covered in the 3rd video in the playlist - link to which you can find in the description.
@PrajinSPКүн бұрын
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!
@ZoaibKhanКүн бұрын
Glad you liked it Prajin!
@ianvinkКүн бұрын
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Күн бұрын
Aah, you mean the host binding in components?
@ianvinkКүн бұрын
well done!
@ZoaibKhanКүн бұрын
Thanks Ian, in part to you as well :)
@DirtySouth33TКүн бұрын
i just signed up and bought it for helping support you as well! really love this type of stuff keep on keeping on, inspiring me to do better
@ZoaibKhanКүн бұрын
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
@DirtySouth33TКүн бұрын
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!
@Animesh8782 күн бұрын
I am i years of exp in angular developer , i did't find any angular vacancy what should i do
@ZoaibKhan2 күн бұрын
I'd suggest building up your portfolio of projects and taking freelance projects while you search for a vacancy
@harshakuppala2 күн бұрын
Great, Waiting for the updated code
@ZoaibKhan2 күн бұрын
Hey Harsha! If you'd purchased the sidebar in the past, you should've got an email by now
@harshakuppala2 күн бұрын
@@ZoaibKhangot the mail ❤
@ZoaibKhan2 күн бұрын
Awesome! Enjoy 😊
@SangeetaDammu2 күн бұрын
thanks a lot
@ZoaibKhanКүн бұрын
You're welcome 🤗
@DirtySouth33T3 күн бұрын
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 :)
@ZoaibKhan3 күн бұрын
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 :)
@DirtySouth33T3 күн бұрын
@@ZoaibKhan i am learning the smaller the component the easier tests are as well :)
@RainerHahnekamp4 күн бұрын
Hey Zoaib, great video. Nice to see that you spread the message! 👍
@ZoaibKhan4 күн бұрын
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 :)
@MikoOfiaza5 күн бұрын
I have one small problem after collapsing the sidenav a horizontal scrollopsy appears
@ZoaibKhan4 күн бұрын
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?
@DirtySouth33T7 күн бұрын
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?
@ZoaibKhan6 күн бұрын
It's using angular material 2 - which is default UpTo angular v17. From v18 onwards, it's material 3
@ianvink7 күн бұрын
I bought the BuyMeCoffee full project and it works great. How do I add a 3rd level to the menu, 2 isn't enough
@ZoaibKhan6 күн бұрын
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 :)
@ianvink6 күн бұрын
@@ZoaibKhan I’m happy to buy the next version too
@ZoaibKhan6 күн бұрын
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 :)
@ZoaibKhan2 күн бұрын
And here you go - support for multiple infinite levels added! Also, hope you don't min me mentioning you a bit in the video kzbin.info/www/bejne/f6PJZZSQeJh_hrs P.S If you've not received the updated version, let me know. I'll send you a free coupon for it :)
@kolluruprakash7 күн бұрын
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. 😊
@ZoaibKhan7 күн бұрын
You're welcome 🤗 That can be a great followup video, thanks for the suggestion :)
@it-s-me-mohit8 күн бұрын
Can you show content projection as well in this context
@ZoaibKhan7 күн бұрын
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.
@Humppakarajat8 күн бұрын
I gave Catie Nettleship a call and she approves this. Well done Zoaib!
@ZoaibKhan8 күн бұрын
Who's she? 🤔
@ZoaibKhan8 күн бұрын
Oh, I got it 😂😂 Thanks for the comment 😊
@Humppakarajat7 күн бұрын
@@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?
@ZoaibKhan7 күн бұрын
Hmm, interesting. You're referring to documentation generators?
@Humppakarajat7 күн бұрын
@@ZoaibKhan for example, yes
@stevewitman8 күн бұрын
Nicely presented. Thanks!
@ZoaibKhan8 күн бұрын
You're welcome, Steve!
@ianvink8 күн бұрын
very professional
@ZoaibKhan8 күн бұрын
Glad that you found it so! 🙏
@abdelkrimhaddadi50988 күн бұрын
Thanks 🙏🏼
@ZoaibKhan8 күн бұрын
Welcome 🤗
@alokagase4549 күн бұрын
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?
@ZoaibKhan8 күн бұрын
Just use loadComponent in place of component in the routes file and the routes should be lazily loaded automatically!
@draconianyt517410 күн бұрын
Will you taught this video for free it’s request if possible
@ZoaibKhan9 күн бұрын
I can send you a free coupon. Send me an email on [email protected] and we'll take it from there :)
@draconianyt51749 күн бұрын
@@ZoaibKhan thanks a lot
@Robcuisimplu11 күн бұрын
Very helpful. It is something that I needed for one of my projects. Thank you
@ZoaibKhan10 күн бұрын
Glad it was helpful!
@rolygonz196411 күн бұрын
Excelent!!!!!!
@ZoaibKhan11 күн бұрын
Glad you found it helpful ☺️
@rajarajanshrihari748812 күн бұрын
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!!
@ZoaibKhan12 күн бұрын
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 :)
@sachetacharya47714 күн бұрын
Angular material Custom theme not working in angular 18
@ZoaibKhan14 күн бұрын
Are you using the material 3 guide? Because the syntax has changed a bit
@Prakash-c8n16 күн бұрын
hi, need assistance with Angular coding urgently today, please let me know if you are happy to support and assistance 9663361979
@MichaelSmallDev18 күн бұрын
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.
@ZoaibKhan18 күн бұрын
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!
@GregLynn-b3n19 күн бұрын
This is genius and saved me hours. Thank you!
@ZoaibKhan18 күн бұрын
Thanks Greg! I'm glad you found this useful ☺️
@balajibalamurugan805319 күн бұрын
It would be better if we had a function in a signal called listen that can listen to the signal changes!. What do you think of this ?
@ZoaibKhan18 күн бұрын
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
@balajibalamurugan805318 күн бұрын
@@ZoaibKhan do you think it's doable. I think some other frameworks like solid js have these kinds of functions
@ZoaibKhan15 күн бұрын
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 :)
@Labiqakhan19 күн бұрын
Thankyou.
@Labiqakhan20 күн бұрын
Thankyou.
@99blackbelt20 күн бұрын
You have components. Use them. Don’t put the html in the template of the TS file.
@ZoaibKhan20 күн бұрын
Thanks for your comment! I prefer using single file components (SFCs) and keeping my components small for various reasons.
@99blackbelt20 күн бұрын
Always a bad idea to put functions in the html. Big performance hit..
@ZoaibKhan20 күн бұрын
It's a signal, not a function :)
@Haniii9821 күн бұрын
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 :)
@ZoaibKhan21 күн бұрын
You're welcome :)
@persianrom638922 күн бұрын
hi appreciate ! but how to add other validations like validations in reactive forms ?
@ZoaibKhan22 күн бұрын
Check out the angular docs at angular.dev! You add the validations right on the field e.g. required, minlength etc.
@JeanDupont-vp1ht24 күн бұрын
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.
@ZoaibKhan24 күн бұрын
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!
@ayushtamboli349624 күн бұрын
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!
@ZoaibKhan24 күн бұрын
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
@dobb_renato24 күн бұрын
Please the github link …🙋♂️
@ZoaibKhan24 күн бұрын
It's part of my Udemy course, so the code is part of it unfortunately.
@dobb_renato24 күн бұрын
You can share GitHub codde?
@ayushtamboli349625 күн бұрын
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 KZbinr explains the latest technologies in Angular like you do. Please make a complete project for learning and real use.
@ZoaibKhan24 күн бұрын
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)
@DirtySouth33T6 күн бұрын
@@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
@GerardoRojasPachecoАй бұрын
Excellent, thank you very much for your contribution, very clear and useful Please, how could I make the menu expand when I hover over it, something like adminlte
@GerardoRojasPachecoАй бұрын
I found the solution and share it..: <mat-sidenav opened mode="side" #sidenavElement [style.width]="sideNavWidth()" (mouseover)="collapsed.set(false)" (mouseout)="collapsed.set(true)" >
@ZoaibKhan28 күн бұрын
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...
@andresmauriciofajardoolaya2721Ай бұрын
Awesome tips to make apps responsive with material cdk, thanks for this video 😀
@ZoaibKhanАй бұрын
Thanks Andres! Glad you found it helpful ☺️
@wilfredomartel7781Ай бұрын
🎉
@ZoaibKhanАй бұрын
👍👍
@IAMKINGOFKINGSLORDOFLORDSАй бұрын
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.
@IAMKINGOFKINGSLORDOFLORDSАй бұрын
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.
@IAMKINGOFKINGSLORDOFLORDSАй бұрын
and where is the Dashboard and other MenuItems icon being set?
@ZoaibKhanАй бұрын
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
@ZoaibKhanАй бұрын
It's in the menu items array signal defined in the sidenav component
@IAMKINGOFKINGSLORDOFLORDSАй бұрын
@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.
@paschalokafor9043Ай бұрын
Thank you very much Zoaib Khan. I have learnt quite alot from you channel. I am new to angular and I wish I could work with you on any project
@ZoaibKhanАй бұрын
You are most welcome, Paschal! If you're looking for mentoring, you can email me at [email protected] - and I'll try to help you out as much as possible :)
@BlackbirdStudiosBXLАй бұрын
Brilliant. I had no idea how to implement this will try today to get this woeking in our project. Thank you so much!!!
@ZoaibKhanАй бұрын
Also check out my recent followup to this - where I add the nested menu items functionality as well kzbin.info/www/bejne/q2mWpXx5fst_jcU
@BlackbirdStudiosBXLАй бұрын
What other tricks do you have up your sleeve im hooked. @@ZoaibKhan
@BlackbirdStudiosBXLАй бұрын
Will this work in Angular 17 and 18 probably right? You are using standalone components
@ZoaibKhanАй бұрын
@@BlackbirdStudiosBXL yes, the nested one esp was made in v18