NgTemplateOutlet in Angular - Everything You Have to Know (2022)

This video will teach you how to utilize an Angular ngTemplateOutlet directive to create reusable components with customizable and extensible views. You will learn everything you have to know about this directive. We will cover all available features like creating views from templates, providing template context data, and controlling the proper Angular Dependency Injection flow. So if you watch the video until the end, you can be sure that you will be able to handle 80% of all possible use cases related to component view customization.

💥 Become a PRO with my in-depth Angular Forms Course💥

🕒 Time Codes:
00:00:00 - Intro;
00:00:58 - Project Overview;
00:03:17 - Describing the Problem;
00:04:49 - How to create Embedded Views in Angular;
00:10:54 - Let's meet [ngTemplateOutlet] directive;
00:12:43 - Conditionally Rendering ng-templates;
00:16:38 - Introducing Template Context;
00:24:01 - Controlling Parent Injector for components in NgTemplates;
00:30:09 - Recap things we learned;
00:32:14 - Disadvantages of [ngTemplateOutlet] directive;
00:34:00 - Outro;

🔗 Project Code on GitHub:

💡 Short Frontend Snacks (Tips) every week here:

#ng #angular #angular15

[DecodedFrontend]

💥 Learn Angular Forms in-depth and start building complex form controls with ease💥

💡 Short Frontend Snacks (Tips) every week here:

[ibrahimbhabay]

please create a video on content projection.

[HackHeyner]

Does not exist in the world, enough recognition for this guy! Absolute unit of a teacher!

[advaithsurya]

I absolutely love angular and [ngTemplateOutlet] is one of my favourite topics because they allow my template to be extremely reusable. It is indeed very powerful in terms of functionality.

[davidwang]

Another excellent video. Well structured, clearly expained. Three parts with small changes enhanced the concepts. Recap helps the viewers remember what has learned. Thank you so much and happy holidays!

[samuelalejandro]

I don't speak English (I'm Brazilian), but your explanation is so clear and concise that even if I don't know much English I can understand 98% of what you say. By the way, I love your content.

[djedaaa]

I just want to say, i’m crazy about your courses and tutorials. You really have a gift for teaching, you dive deep into subject and talk about complex things which others often avoid do to the complexity. This channel (and also your paid courses) are such a refresher for Angular community.. Keep up the great work!

[sukdipkar]

Nobody in youtube teaches angular like this depth as you! Thank you very much and keep teaching us such valuable concepts.

[rembautimes]

Been following this channel for several years. The tutorials are first class and really appreciate the effort that goes into making the video. I struggled with ng template outlet earlier but this helps a lot

[prangnana]

Simply Superb!!! I have been using ngTemplateOutlet from more than 2 years but still I leant new things from this video.
Thanks Dmytro

[MikelAingeru]

My most sincere congratulations.
You have achieved something very difficult, explaining a complex Angular concept with a simple example and even showing useful tricks like $implicit, context and injector.
Thank you very much!

On the other hand, for me it is very strange to place the <ng-template> tags after the content in which they are going to be rendered. But I guess it's the only option to do it both inside and outside a component and without projection of <ng-content>.

[rahultej]

The way you explain things is not just bring out the solution but also clearly undertand the concepts.

[sergiocebrian]

Great job Dmytro! NgTemplateOutlet is a powerful directive that everyone should use often

[ievgensvichkar]

One more useful video, thanks a lot. Small remark: content projection can also be used in combination with ng-template approach when we use content projection to provide the template to be instantiated inside the recipient component (instead of using @Input for this).

[АнастасияШагаева-йч]

Дмитрий, спасибо большое! Очень понятно и подробно объясняете, одно удовольствие смотреть Ваши ролики.

[AnwarulIslamYT]

I used to use NgTemplateOutlet and NgTemplateOutletContext directive to render repetitive code in the same component. It's really useful.

[georgeknap]

There's never enough videos about ngTemplateOutlet 🤯

[VitaliiZubko]

Great explanation... Thanks. I will share this video with ours juniors, for better understanding...

[Mohid-SE]

I've learned so much from your videos. Your content covers topics I haven't found anywhere and it has helped me a lot in my work. Thank you so much!

[SamiullahKhan]

Again, High Quality Content,
I came across this templateOutlet many times but couldn't get it left alone it's benefits, Even the official docs didn't do the justice (maybe it's me that it didn't reflect with me).

This time I think, you can't cherish the benefits or fruits of declarative approach if haven't gone through the imperative approach like you did with the examples. I know the effort and time it takes to come up with such example's kudos to that.

Although I have more experience with Angular than Vue, but in Vue (I think) they are called scoped slot and I have used it well but coming to Angular I didn't get the templateContext it until this Good, Lengthy video. After knowing this concept now, I think Projected Content don't have luxury of Context. What else?