Content Projection in Angular - Complete Guide (Beginners/Advanced)
Vložit
- čas přidán 5. 07. 2024
- 👉 To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/DecodedFrontend
You’ll also get 20% off an annual premium subscription.
In this video, besides the basics of content projection in Angular, you will also learn more advanced scenarios like multi-slot content projection, Content Re-Projection, Projection aliasing, and ngProjectAs attribute, and last but not least, I will show how to deal with Conditional content projection.
So, generally speaking, at the end of the video, you will learn everything you need to implement angular components with customizable views of any complexity. Thank you for your attention, and don't forget to share this video if you find it useful.
👉 See All Angular Courses - bit.ly/discounted-course-bundle
🕒 Time Codes:
00:00 - Intro
00:01:12 - Single-Slot projection
00:02:51 - Fallback Content in Angular 18+
00:03:36 - Multi-Slot Projection
00:05:24 - Selector Naming best practices
00:08:22 - Brilliant Ad Integration
00:09:37 - Aliasing in Content Projection
00:12:43 - Content Re-Projection
00:16:44 - When to AVOID NgContent
00:20:00 - Conditional Content Projection in Action
00:25:40 - Outro;
🔗 Solution Source Code:
github.com/DMezhenskyi/angula...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
This video was sponsored by Brilliant. - Věda a technologie
👉 To try everything Brilliant has to offer for free for a full 30 days, visit brilliant.org/DecodedFrontend
You’ll also get 20% off an annual premium subscription.
The best educational content on the Angular framework on CZcams
Thank you, Syimyk! I appreciate your feedback 🙌🏻
You're the only Angular content creator that is worth his salt. You have helped me SO much in the many years I work on Angular. I'm still a bit of a tosser, but without you my projects would be an absolute mess.
Thank you, your videos on Angular are the best.
Thanks for the well thought out material. I think that a clear understanding of content projection is essential for making dynamic reusable components.
Was a big fan of your structural directive and ngTemplate/Outlet series! And now ng-content, just in time for the new default ng-content slot in Angular 18.
Thanks for making such high quality content for free Dmytro
The content re-projection part is really sick, I have only been able to re-project with ng-content (no selector) until today I learn that ngProjectAs can be used to persist the selector to lower layer 😮
That's great to hear :) When I did a research for this video, I was surprised that this topic about ngProjectAs didn't get enough attention.
P.S. Thank you so much for this detailed feedback. Much appreciate it ;)
Thanks, Dmytro. As usual, your explanation is amazing!
Excelent explanation! thanks!
Added to learning queue. I am trying to learn many of your topics. I was struggling a lot to enhance my angular skills. Congrats on making advanced topics easy to understand. 👏👏
I am so happy to hear that; thank you! There are more to come ;)
Already knew most of what was explained, but what was important is the "why" it is done. Great content as usual.
Thanks, Pedro! I appreciate your feedback.
The conditional component projection is just what I was looking for today!! I am working on my custom components library! Thanks!!!
You could consider making a course about angular cdk. thanks for video!
Thanks for this great idea 🙌
i have clear one thing on each video you upload, you're the angular's master, the closing part of the video was brutal, thanks, i send you a big huge from colombia
Thanks, i was looking for this content today.
That is a very nice explanation of ng-content! Thank you!
You are my favorite ref for learning Angular, thanks you really !
why you are so kind and so smart so brilliant?
I really really really appreciate it for these video
i hope you achieve everything you want
i always pray for you
Very informative 👍 I never thought of different variations or scenarios in content projection. Thanks for sharing.
Again amazing content! Thank you!
Thanks for another useful video, Dmytro) always learn something interesting and helpful
Thanks for the video. It's very informative 👏
I really appreciate your work , thanks :)
Thank you so much!
thank you!
Very useful, thanks once again for these amazing contents
My pleasure!
I've seen your other video about NgTemplateOutlet. Very informative and thank you for that. My main confusion is: when to use a defined template with ngTemplateOutlet and when to use ngContent. I know the relationship of ngContent is a parent child and the TOutlet doesn't have that kind of relation. But when do I use ngContent over the ngtemplateoutlet when reasoning about a such problems? What is the distinct statement for: OH, now I have to use ngContent... or oh, now I have to use ngTemplOutlet?
Well..., posted this at 15min. And my question answered at 20min.
Thnx!
Really cool video, second part especially! Many thanks👌
Glad to hear that because I was actually in doubt if I should cut the part with conditional content projection to make video shorter :D
@@DecodedFrontend definitely no!
Content projection in Angular 18 seems a bit more sophisticated than that of React. Slots are a great pattern, I wish we could have a dedicated slot keyword for this sorta stuff. Using classes as identifier would be a mistake too.
love your content.
Glad to hear that! Thank you 😊
Dmytro back at it like a bad habbit 🎉😂
Great
Amazing content... ng-content :)
😁 thank you :)
Hi thank you for the content. My question is should i convert my production app to zoneless is it recommended?
It's still in an experimental phase, I would suggest you wait.
Thanks for your comment! Well, if it is a small & non-critical project, then you can relatively easily migrate to Zone-less to try it out. For bigger and more important projects, I would wait a little bit because (as it was mentioned above) it is still an experiment phase. However, in the long run (e.g., 1 year), I would definitely set the goal to become zoneless. Just don't hurry up. The benefits of Zoneless apps are big but not so big to start migration ASAP with a risk of breaking the app :)
I want you to make videos on below topics as your explanation is Top notch.
1. Performance optimization techniques for Large scale applications
2. How to migrate to Angular 17 from any version for eg. 11
the only one thing that prevent ppl to understand ur explanation is they dont know english 😂
Thank you - Great video with a good overview! Angular is so much ahead of React.
Thanks for your feedback. Angular is awesome!