Structural Directives in Angular - How to Create Custom Directive
Вставка
- Опубліковано 26 лип 2024
- With this video tutorial, I would like to start a video series dedicated to structural directives in Angular. This kind of directive is a very powerful tool that allows you to manipulate with DOM elements and reshare that logic across your Angular application. From this video, you will learn how to create a custom structural directive and how to make your directive configurable by using a special micro syntax designed specifically for this kind of directive. I am quite sure that you will learn something cool today, so stay tuned, subscribe and enjoy the video!
🔥 -15% OFF For All My Courses 🔥
Use coupon: UA-cam_DISCOUNT during the purchase
Courses:
⭐ Angular Interview Hacking
🔗 courses.decodedfrontend.io/co...
⭐ Angular Material Theming Course (Advanced)
🔗 courses.decodedfrontend.io/co...
⭐ Performant Graphql Backend in 1 Day by Using Hasura Engine
🔗 courses.decodedfrontend.io/co...
🕒 Time Codes:
00:00:00 - Intro;
00:00:38 - Basic Structural Directive implementation;
00:15:51 - Outro;
🔗 Link to GitHub repo:
github.com/DMezhenskyi/struct...
#angular #webdevelopment - Наука та технологія
If you like my videos you will probably like my courses as well 😉Check them out here - courses.decodedfrontend.io
After working as a fullstack dev for over 3 years, there are still plenty of areas of angular i fail to understand. The content you've been making is absolutely invaluable!
Thanks a lot! It is awesome that my vids could help you with those topics 🙂
Yeah your videos have done a great job in teaching me and filling in my gaps in knowledge. Sadly the official documentation for most advanced topics are extremely minimal and the examples don’t really show you how and more and importantly WHY you should use them.
it is the best tutorial for structural directive . thanks for ur efforts
happy to hear that! Enjoy :)
Woot woot Angular 2022! Looking forward to your videos this year.
I wonder why this video doesn't have million likes!!
Now i finally understood how to use it. Thanks for your vids :)
So far, great angular content on youtube... these are scenarios we meet in projects
Bought a course of you to say thank you 🙂
Thank you very much, Henk! Enjoy the course! I hope it will be helpful as well 😉 I would be very grateful if later on I could get some feedback from you.
Finally, first video in 2022 🥳🥳🥳🥳🥳 ...thank you for sharing this video!
Nice background view btw ;)
Nice, we should use directives to more often
Hey Dmytro,
My coworker Shows me your yt channel and I start to loving your Videos.
Very good explained examples in your videos.
thumbs up!!!
Great work my friend, i didn't know about structural directives, thank to you already know it
Thank you for the feedback! I am glad that you learned something new today :)
@@DecodedFrontend your advicce has help me a lot, i'm working as angular developer and all your info is valuable in my day to day
Very well explained. Is it a new year's gift...
Kind of :) Happy new year 🎊
Мені цей відос дав розуміння як пофиксити багу, яка змушувала мене страждати. Дуже тобі дякую за круті уроки, поступово передивлюся їх усі))
🔥 круто!!! Дуже радий, що відос став у нагоді😉 Дякую за фідбек, це мотивує!
was working in Angular from 4 years, still learnt something new!
Thanks for sharing, I learnt something new today.
I am glad to hear that! Thanks for feedback 🙂
I honestly enjoy learning from you. I did know those but with your explanation and your method of teaching everything becomes clear.
Thanks for your feedback, Ari!
You have a gift of teaching effortlessly. 👌👌 Love all of your videos.
Thanks a lot 😊
Amazing!! Keep it coming
Thank you for explaining it in more practical way like this. Unfortunately most of the tutors don't understand that "fooBar" thing or TODO thing doesn't make sense at all.
Wow!!! We need a full tips course with content like this one. Several advanced concepts that no other beginner to advanced courses are explaining in this way like you. Please could be possible man??? Thanks.
I think it should not be a problem:) which topics would be interesting for you?
@@DecodedFrontend Great, some interesting topics, would be. Usually non covered and useful topics for the Angular Core, Useful patterns and anti-patterns for Angular projects. Advanced uses of D.Injection. Best practices for creating components and architecturing angular enterprise apps following best practises and patterns like SOLID, DRY, KISS, and other best practises. And some other topics could be some of integration with NestJS apps, use of GraphQL between those apps, and so on. If other user want to extend this list, is very welcome. if you think it could be possible, take my money hahahaha
Very big thanks! Extremely understandable. Your tutorial is the best
Hi Dmytro, I've discovered your channel just recently and it's one of the best resources I've found for intermediate Angular topics! Appreciate how you can easily explain quite complex topics with great examples. Keep up the good work and thank you for sharing your knowledge!
Thank you, Milan! I appreciate your feedback 😊🙌
The best Angular channel. Thank you, Dmytro🙂
Thanks for the amazing videos !! Keep up the good work, more power to you Dymtro :)
That was amazing 🤯
Loved it! Thank you
Nice explaination! Thank you very much!
Чел ну конечно мое почтение. Что не видос - то бомба ! Впервые в жизни задумался о покупке курса в интернете, поверить не могу... Твой курс того стоит ведь ? Вообще с таким бы кайфом послушал курс на русском, хоть ты и на английском стараешься говорить.
Привет!) спасибо большое за такой крутой отзыв, я очень рад, что мои видосы это не просто трата зрительского времени!😊
Я не могу со 100% уверенностью заявлять, что однозначно курс стоит того (с моей стороны это было бы лукавство и предвзято), так как это зависит от очень многих факторов и всем угодить нереально просто)) поэтому я всегда даю гарантию возврата денег если вдруг курс не понравился 🙂
Thank you! that is a great explanation!
Learnt something new today! Thank you. 🔥
Great to hear that!
Nice! Thank you 😀
nice and clear. Good to go
Awesome, extremely understandable!
Brilliant video. Thanks so much for your efforts :)
You are welcome 🤗
Hell yeah!!! You've started covering structural directive stuff, which I personally waited for)) Thanks for a nice start of the series. Btw, I believe everyone of us would profit if you'd tackle context guards when you come to directives context, as this topic not so clear most of the time or skipped at all!)
+1 to this. Most documentation/instruction glosses over TemplateRef by passing in `any` as the generic argument, but it'd be helpful to see examples of typed template references
Hi Arthur! I like that you asked this :) Context Guards topic is planned to be in this video series (in 3rd one if to be precise) :) Actually, it was exactly the reason for creating videos about structural directives, I just decided to be more consistent and cover the topic about directives starting from more basic stuff to more advanced, so even beginners could eventually figure out what we are talking about ;)
Thanks for the video.. its really goood
Thanks so much!
You desperately need a music intro
You are welcome! :) there will be music intro one day!
Fantastic 👏👏👏👏
Thank you very much because of the nice advanced topics, which gave your channel unique and useful content, keep going, best of luck.
Thank you Yosef!
Cool, thanks! I didn't even know there is such a thing as microsyntax 😄
Great! Thank you for sharing knowledge!
You are welcome 🇺🇦
well explained, thanks man
Thanks for feedback 😉
Amazing content and nice video edition I liked the popups / notes
Thank you 😊
Отличное видео! Спасибо.
Another great video! Thanks a lot!
Welcome :)
Thank you! Nice ! 😊
thanks a lot for the video, that would also great to show usage of @Output from within the directive and how to listen for EventEmitter inside the template of the component
Very nice 👍
Thank you for a cool video!
You are welcome 🤗
Can you please help us know what all things a technical lead developer should know... Or make series for for such developers who are at a place where they want to reach from senior to lead or architect level... Would much appreciate thanks 🙏
Thank you!
You are welcome 🤗
Thank you
Nice 🙂🙂🤩
i wait for next video :)
Next one will be really cool 😉
Super nice content, can't wait for a new use case to add a structural directive. I would like to know if you have other courses in development because maybe there are a few people that want to improve their angular and they have a job, they don't use material design or graphql
Feel free to suggest topics for the courses :)
@@DecodedFrontend from the top of my head I would say maybe dynamic reactive forms, developing angular libraries, maybe some ngrx / component state, microfrontends if its the case
I should be working now... So here I am.
my bed 🤣 excellent video as usual, thanks a lot!
Great
Grate content! I like the way you explain the topic. I also like your english. English is not my native lang, but I understand everything you say so easily. Unfortunately you don't disclose the topic of real cases where directives are used in applications. I think hiding component is only one of many cases
Can we separate input/select/checkbox as a reusable component but still tie to formControlName of a certain formGroup in any form? Just calling the input field and tying to the form and that input does its thing like passing change of value and showing error if its handled in that input reusable component?
Very interesting content. Btw where do you find this information )? I can't see this in angular documentation 😃
Привет Дмитрий!
По subject и ее разновидностей можешь записать видеоурок.
Привет! Немного позже, думаю, что запишу)
cool man
Hey, can we have HttpModule in angular do something like react-query?
hello sir, can you explain how mat-table from angular material work? how it can move th and td element into tr element using structural directive?
Будем посмотреть))
Надеюсь понравится)
@@DecodedFrontend Очень. На этом канале и поднимаю скилл) Спасибо за качественный контент! 😊😋👍
what if your eslint rules do not allow the use of "any" typings, but you need it to be generic enough for any component?
Hi! I think you can find answers in this video - Structural Directives in Angular - How to Make It Strict (In-Depth)
ua-cam.com/video/fsGzxyHi6yY/v-deo.html
Hi Dmytro, directives should implement OnPush change detection strategy? Or it's not neccessary? Thanks in advance
No, directives don’t even have such an option :)
Great video. But: what's the plug in to show the gzipped size in the top? :D thanks!
Hey :) google for “import cost” vs code plugin
@@DecodedFrontend thanks!
It seems that Angular team makes features without documenting them fully, unless I missed something vast.
Is there any way to provide you with a recurring monetary contribution to show my support and increase the chances of you keep providing this high quality content for us? I'm currently considering buying your interview hack course just to support (also suspecting I will learn a lot though), just need to feel like I have the time to go through it. However it'd also be great to just give you something for what you already provide for us here for free. Anyways, thanks a lot for great content as always!
Hi Love! Wow, thank you so much for your support, it is invaluable help 😊Until now I didn't have such an option but I just created a donation page on PayPal, so you could use this link for it bit.ly/donate-to-decoded-frontend
@@DecodedFrontend Stellar! I set up a monthly for you now, it ain't much but it is anyways a token of gratitude. We can hope for a snowball effect! :) This is not the place to get too soft-hearted but let me know if you ever feel down and need cheering up and I will write you a minor novel about the love I have for this type of knowledge sharing and contribution to the community.
I just saw it! Thank you, Love! It is invaluable support from your side, much much appreciated :)
👋👋👋
👋
3:20 where have we covered attribute directive? You didn't cover it I guess
No, I didn’t cover attribute directives. When I told “if you remember…” I didn’t mean that it was covered somewhere in this video. I think there was some misunderstanding. Sorry about that…
@@DecodedFrontend Oh I see, anyways thank you for a great tutorials! I am just learning Angular and really love and much appreaciate your videos! The explanations are so full and meaningful! Hope you can make some playlist from beginner to advanced Angular developer :)
@@kingofyoursoul thank you for the feedback and your thoughts! I am glad to hear that the explanation is clear for you though the target audience was actually experienced developers :) Good luck with Angular 😉