Content Projection in Angular - Complete Guide (Beginners/Advanced)

Рет қаралды 11,455

Күн бұрын

👉 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.

Пікірлер: 52

@DecodedFrontend 27 күн бұрын

👉 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.

@syimykamatov8955 26 күн бұрын

The best educational content on the Angular framework on KZfaq

@DecodedFrontend 26 күн бұрын

Thank you, Syimyk! I appreciate your feedback 🙌🏻

@FranklyTerrible 25 күн бұрын

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.

@dylanjhalltech8313 14 күн бұрын

Thanks for the well thought out material. I think that a clear understanding of content projection is essential for making dynamic reusable components.

@user-tv9ol8ne3k 13 күн бұрын

Thanks, Dmytro. As usual, your explanation is amazing!

@vutruong4164 25 күн бұрын

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

@vutruong4164 25 күн бұрын

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 😮

@DecodedFrontend 25 күн бұрын

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 ;)

@pedrofernandes2005 25 күн бұрын

Already knew most of what was explained, but what was important is the "why" it is done. Great content as usual.

@DecodedFrontend 25 күн бұрын

Thanks, Pedro! I appreciate your feedback.

@bogdanbodirlau2006 25 күн бұрын

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. 👏👏

@DecodedFrontend 25 күн бұрын

I am so happy to hear that; thank you! There are more to come ;)

@marcolmos9079 23 күн бұрын

The conditional component projection is just what I was looking for today!! I am working on my custom components library! Thanks!!!

@vkRenan 25 күн бұрын

Thanks, i was looking for this content today.

@haroldpepete 25 күн бұрын

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

@tryhuma 19 күн бұрын

You could consider making a course about angular cdk. thanks for video!

@DecodedFrontend 19 күн бұрын

Thanks for this great idea 🙌

@ViktosB 24 күн бұрын

Again amazing content! Thank you!

@malyna 24 күн бұрын

That is a very nice explanation of ng-content! Thank you!

@eduardointech 25 күн бұрын

Thank you so much!

@alphamarouanadiallo8238 25 күн бұрын

You are my favorite ref for learning Angular, thanks you really !

@CeezGeez 24 күн бұрын

thank you!

@zer09815 25 күн бұрын

I really appreciate your work , thanks :)

@dale_nguyen 25 күн бұрын

Thanks for the video. It's very informative 👏

@nanasarathi 25 күн бұрын

Very informative 👍 I never thought of different variations or scenarios in content projection. Thanks for sharing.

@gagiksimonyan3782 25 күн бұрын

Thanks for another useful video, Dmytro) always learn something interesting and helpful

@Aliakbaresmaeiliiii 25 күн бұрын

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

@denisgandzii1551 25 күн бұрын

Really cool video, second part especially! Many thanks👌

@DecodedFrontend 25 күн бұрын

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

@denisgandzii1551 25 күн бұрын

@@DecodedFrontend definitely no!

@marcosjrs 25 күн бұрын

Very useful, thanks once again for these amazing contents

@DecodedFrontend 25 күн бұрын

My pleasure!

@syimykamatov8955 26 күн бұрын

love your content.

@DecodedFrontend 26 күн бұрын

Glad to hear that! Thank you 😊

@heavierthanlight7173 25 күн бұрын

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?

@heavierthanlight7173 25 күн бұрын

Well..., posted this at 15min. And my question answered at 20min. Thnx!

@TheMKilo8 24 күн бұрын

Amazing content... ng-content :)

@DecodedFrontend 24 күн бұрын

😁 thank you :)

@monfernape 24 күн бұрын

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.

@Niachan666 25 күн бұрын

Great

@deadlyecho 25 күн бұрын

Dmytro back at it like a bad habbit 🎉😂

@CodeZakk 25 күн бұрын

Hi thank you for the content. My question is should i convert my production app to zoneless is it recommended?

@ugochukwuumerie6378 25 күн бұрын

It's still in an experimental phase, I would suggest you wait.

@DecodedFrontend 25 күн бұрын

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 :)

@vk19148 25 күн бұрын

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