Пікірлер
@nejmaljamal1281
@nejmaljamal1281 Күн бұрын
Can't we just use angular mat tree component instead
@ZoaibKhan
@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
@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
@ZoaibKhan Күн бұрын
I think that's covered in the 3rd video in the playlist - link to which you can find in the description.
@PrajinSP
@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
@ZoaibKhan Күн бұрын
Glad you liked it Prajin!
@ianvink
@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
@ZoaibKhan Күн бұрын
Aah, you mean the host binding in components?
@ianvink
@ianvink Күн бұрын
well done!
@ZoaibKhan
@ZoaibKhan Күн бұрын
Thanks Ian, in part to you as well :)
@DirtySouth33T
@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
@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
@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!
@Animesh878
@Animesh878 2 күн бұрын
I am i years of exp in angular developer , i did't find any angular vacancy what should i do
@ZoaibKhan
@ZoaibKhan 2 күн бұрын
I'd suggest building up your portfolio of projects and taking freelance projects while you search for a vacancy
@harshakuppala
@harshakuppala 2 күн бұрын
Great, Waiting for the updated code
@ZoaibKhan
@ZoaibKhan 2 күн бұрын
Hey Harsha! If you'd purchased the sidebar in the past, you should've got an email by now
@harshakuppala
@harshakuppala 2 күн бұрын
@@ZoaibKhangot the mail ❤
@ZoaibKhan
@ZoaibKhan 2 күн бұрын
Awesome! Enjoy 😊
@SangeetaDammu
@SangeetaDammu 2 күн бұрын
thanks a lot
@ZoaibKhan
@ZoaibKhan Күн бұрын
You're welcome 🤗
@DirtySouth33T
@DirtySouth33T 3 күн бұрын
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 :)
@ZoaibKhan
@ZoaibKhan 3 күн бұрын
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 :)
@DirtySouth33T
@DirtySouth33T 3 күн бұрын
@@ZoaibKhan i am learning the smaller the component the easier tests are as well :)
@RainerHahnekamp
@RainerHahnekamp 4 күн бұрын
Hey Zoaib, great video. Nice to see that you spread the message! 👍
@ZoaibKhan
@ZoaibKhan 4 күн бұрын
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 :)
@MikoOfiaza
@MikoOfiaza 5 күн бұрын
I have one small problem after collapsing the sidenav a horizontal scrollopsy appears
@ZoaibKhan
@ZoaibKhan 4 күн бұрын
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?
@DirtySouth33T
@DirtySouth33T 7 күн бұрын
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?
@ZoaibKhan
@ZoaibKhan 6 күн бұрын
It's using angular material 2 - which is default UpTo angular v17. From v18 onwards, it's material 3
@ianvink
@ianvink 7 күн бұрын
I bought the BuyMeCoffee full project and it works great. How do I add a 3rd level to the menu, 2 isn't enough
@ZoaibKhan
@ZoaibKhan 6 күн бұрын
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 :)
@ianvink
@ianvink 6 күн бұрын
@@ZoaibKhan I’m happy to buy the next version too
@ZoaibKhan
@ZoaibKhan 6 күн бұрын
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 :)
@ZoaibKhan
@ZoaibKhan 2 күн бұрын
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 :)
@kolluruprakash
@kolluruprakash 7 күн бұрын
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. 😊
@ZoaibKhan
@ZoaibKhan 7 күн бұрын
You're welcome 🤗 That can be a great followup video, thanks for the suggestion :)
@it-s-me-mohit
@it-s-me-mohit 8 күн бұрын
Can you show content projection as well in this context
@ZoaibKhan
@ZoaibKhan 7 күн бұрын
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.
@Humppakarajat
@Humppakarajat 8 күн бұрын
I gave Catie Nettleship a call and she approves this. Well done Zoaib!
@ZoaibKhan
@ZoaibKhan 8 күн бұрын
Who's she? 🤔
@ZoaibKhan
@ZoaibKhan 8 күн бұрын
Oh, I got it 😂😂 Thanks for the comment 😊
@Humppakarajat
@Humppakarajat 7 күн бұрын
@@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?
@ZoaibKhan
@ZoaibKhan 7 күн бұрын
Hmm, interesting. You're referring to documentation generators?
@Humppakarajat
@Humppakarajat 7 күн бұрын
@@ZoaibKhan for example, yes
@stevewitman
@stevewitman 8 күн бұрын
Nicely presented. Thanks!
@ZoaibKhan
@ZoaibKhan 8 күн бұрын
You're welcome, Steve!
@ianvink
@ianvink 8 күн бұрын
very professional
@ZoaibKhan
@ZoaibKhan 8 күн бұрын
Glad that you found it so! 🙏
@abdelkrimhaddadi5098
@abdelkrimhaddadi5098 8 күн бұрын
Thanks 🙏🏼
@ZoaibKhan
@ZoaibKhan 8 күн бұрын
Welcome 🤗
@alokagase454
@alokagase454 9 күн бұрын
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?
@ZoaibKhan
@ZoaibKhan 8 күн бұрын
Just use loadComponent in place of component in the routes file and the routes should be lazily loaded automatically!
@draconianyt5174
@draconianyt5174 10 күн бұрын
Will you taught this video for free it’s request if possible
@ZoaibKhan
@ZoaibKhan 9 күн бұрын
I can send you a free coupon. Send me an email on [email protected] and we'll take it from there :)
@draconianyt5174
@draconianyt5174 9 күн бұрын
@@ZoaibKhan thanks a lot
@Robcuisimplu
@Robcuisimplu 11 күн бұрын
Very helpful. It is something that I needed for one of my projects. Thank you
@ZoaibKhan
@ZoaibKhan 10 күн бұрын
Glad it was helpful!
@rolygonz1964
@rolygonz1964 11 күн бұрын
Excelent!!!!!!
@ZoaibKhan
@ZoaibKhan 11 күн бұрын
Glad you found it helpful ☺️
@rajarajanshrihari7488
@rajarajanshrihari7488 12 күн бұрын
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!!
@ZoaibKhan
@ZoaibKhan 12 күн бұрын
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 :)
@sachetacharya477
@sachetacharya477 14 күн бұрын
Angular material Custom theme not working in angular 18
@ZoaibKhan
@ZoaibKhan 14 күн бұрын
Are you using the material 3 guide? Because the syntax has changed a bit
@Prakash-c8n
@Prakash-c8n 16 күн бұрын
hi, need assistance with Angular coding urgently today, please let me know if you are happy to support and assistance 9663361979
@MichaelSmallDev
@MichaelSmallDev 18 күн бұрын
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.
@ZoaibKhan
@ZoaibKhan 18 күн бұрын
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-b3n
@GregLynn-b3n 19 күн бұрын
This is genius and saved me hours. Thank you!
@ZoaibKhan
@ZoaibKhan 18 күн бұрын
Thanks Greg! I'm glad you found this useful ☺️
@balajibalamurugan8053
@balajibalamurugan8053 19 күн бұрын
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 ?
@ZoaibKhan
@ZoaibKhan 18 күн бұрын
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
@balajibalamurugan8053
@balajibalamurugan8053 18 күн бұрын
@@ZoaibKhan do you think it's doable. I think some other frameworks like solid js have these kinds of functions
@ZoaibKhan
@ZoaibKhan 15 күн бұрын
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 :)
@Labiqakhan
@Labiqakhan 19 күн бұрын
Thankyou.
@Labiqakhan
@Labiqakhan 20 күн бұрын
Thankyou.
@99blackbelt
@99blackbelt 20 күн бұрын
You have components. Use them. Don’t put the html in the template of the TS file.
@ZoaibKhan
@ZoaibKhan 20 күн бұрын
Thanks for your comment! I prefer using single file components (SFCs) and keeping my components small for various reasons.
@99blackbelt
@99blackbelt 20 күн бұрын
Always a bad idea to put functions in the html. Big performance hit..
@ZoaibKhan
@ZoaibKhan 20 күн бұрын
It's a signal, not a function :)
@Haniii98
@Haniii98 21 күн бұрын
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 :)
@ZoaibKhan
@ZoaibKhan 21 күн бұрын
You're welcome :)
@persianrom6389
@persianrom6389 22 күн бұрын
hi appreciate ! but how to add other validations like validations in reactive forms ?
@ZoaibKhan
@ZoaibKhan 22 күн бұрын
Check out the angular docs at angular.dev! You add the validations right on the field e.g. required, minlength etc.
@JeanDupont-vp1ht
@JeanDupont-vp1ht 24 күн бұрын
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.
@ZoaibKhan
@ZoaibKhan 24 күн бұрын
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!
@ayushtamboli3496
@ayushtamboli3496 24 күн бұрын
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!
@ZoaibKhan
@ZoaibKhan 24 күн бұрын
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_renato
@dobb_renato 24 күн бұрын
Please the github link …🙋‍♂️
@ZoaibKhan
@ZoaibKhan 24 күн бұрын
It's part of my Udemy course, so the code is part of it unfortunately.
@dobb_renato
@dobb_renato 24 күн бұрын
You can share GitHub codde?
@ayushtamboli3496
@ayushtamboli3496 25 күн бұрын
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.
@ZoaibKhan
@ZoaibKhan 24 күн бұрын
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)
@DirtySouth33T
@DirtySouth33T 6 күн бұрын
@@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
@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
@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)" >
@ZoaibKhan
@ZoaibKhan 28 күн бұрын
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
@andresmauriciofajardoolaya2721 Ай бұрын
Awesome tips to make apps responsive with material cdk, thanks for this video 😀
@ZoaibKhan
@ZoaibKhan Ай бұрын
Thanks Andres! Glad you found it helpful ☺️
@wilfredomartel7781
@wilfredomartel7781 Ай бұрын
🎉
@ZoaibKhan
@ZoaibKhan Ай бұрын
👍👍
@IAMKINGOFKINGSLORDOFLORDS
@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
@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
@IAMKINGOFKINGSLORDOFLORDS Ай бұрын
and where is the Dashboard and other MenuItems icon being set?
@ZoaibKhan
@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
@ZoaibKhan Ай бұрын
It's in the menu items array signal defined in the sidenav component
@IAMKINGOFKINGSLORDOFLORDS
@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
@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
@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
@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
@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
@BlackbirdStudiosBXL Ай бұрын
What other tricks do you have up your sleeve im hooked. ​@@ZoaibKhan
@BlackbirdStudiosBXL
@BlackbirdStudiosBXL Ай бұрын
Will this work in Angular 17 and 18 probably right? You are using standalone components
@ZoaibKhan
@ZoaibKhan Ай бұрын
@@BlackbirdStudiosBXL yes, the nested one esp was made in v18
@BlackbirdStudiosBXL
@BlackbirdStudiosBXL Ай бұрын
Thank you so much for this. Exactly what i need.
@ZoaibKhan
@ZoaibKhan Ай бұрын
Glad it was helpful! :)