NgTemplateOutlet in Angular - Everything You Have to Know (2022)
Vložit
- čas přidán 9. 07. 2024
- 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💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-disc...
🕒 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:
github.com/DMezhenskyi/angula... (initial state in main branch)
🙌 Support Dmytro bit.ly/donate-to-decoded-fron...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi
#ng #angular #angular15 - Věda a technologie
![Angular Design Patterns - Bridge [Advanced, 2020]](http://i.ytimg.com/vi/2rQOu9TmuxE/mqdefault.jpg)
![Angular Design Patterns – Bridge [Advanced, 2020]](/img/tr.png)
💥 Learn Angular Forms in-depth and start building complex form controls with ease💥
🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-discounted
💡 Short Frontend Snacks (Tips) every week here:
Twitter - twitter.com/DecodedFrontend
Instagram - instagram.com/decodedfrontend
LinkedIn - www.linkedin.com/in/dmezhenskyi
please create a video on content projection.
Okay :)
Does not exist in the world, enough recognition for this guy! Absolute unit of a teacher!
Nobody in youtube teaches angular like this depth as you! Thank you very much and keep teaching us such valuable concepts.
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!
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.
completely agree!
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.
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!
Thank you, I am glad that you liked the video. Have a great holidays as well :)
Another great video!
Thanks a lot for everything you do for us! I really learned a lot from your videos.
Yes, we really want the next video with the ng-content tips and tricks.
Great job Dmytro! NgTemplateOutlet is a powerful directive that everyone should use often
what an amazing and useful content you are making. You don't know how much helpful it is in my daily routine work! Thanks a ton
Fantastic video, extremely helpful! Thank you!
Thank you! The best content about Angular.
this was exactly what i needed. thanks for the video
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
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!
Дмитрий, спасибо большое! Очень понятно и подробно объясняете, одно удовольствие смотреть Ваши ролики.
very useful vid! thank you for being generous to us. you are really a smart guy!
The way you explain things is not just bring out the solution but also clearly undertand the concepts.
Another great video. Thanks ❤ and Happy new year 🎉🎉
Crisp and Clear. Good Work 👍
U make my learning curve easy now :). This is the missing spot for more advanced concepts. Cheers
Thanks a lot for the explanation. It's amazing!
I would like to know more about content projection.
Amazingly taught. Very informative. Thanks for this❤
Thaks for sharing. This content is gold
Thanks for your greate video about template outelet. I've recently used it to create a dynamic mat-search-select. thanksssssss
Simply Superb!!! I have been using ngTemplateOutlet from more than 2 years but still I leant new things from this video.
Thanks Dmytro
Never really used this concept into depth but this video clearly put it out. 🥳
Great work
I'd love to see a video on content projection
Muito bom Parabéns, a qualidade está muito boa de seus vídeos continue assim amigo!
I used to use NgTemplateOutlet and NgTemplateOutletContext directive to render repetitive code in the same component. It's really useful.
So good video..... Thank you so so much
There's never enough videos about ngTemplateOutlet 🤯
muchas gracias, excelente video, nuevo subs
I'l new in the game and your videos are very useful -. Thanks
Late to the party but THNX A BUNCH! Really cewl feature!
Thank you! Very useful video!!!
You are welcome:)
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 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 .
Happy New Year, Dmytro) Wish you all the best:)
Thank you, Gagik! Happy New Year!
Really interesting video! I would like to have a video related to content projection as well :)
I will be glad to make it ;)
another awesome lesson!
Thanks 🙏🏻
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?
Great video! I would also be interested in a video about content projection and when to use content projection / ngTemplateOutlet
U r awesome Dmytro.. ❤ from India Please keep making videos on important stuff of angular. Very helpful..
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).
That is exactly what I was thinking about at the end of the video. I think that Dmytro wanted to show us new Angular feature instead - ngTemplateOutlerInjector which is also very cool by the way :)
Hey guys :) Yes, you are right (you both :) ). Actually, many things could be accomplished in many different ways, and "the best" solution is usually very dependent on the particular details and your goals. The solution in the video was chosen just for the demonstration of the ngTemplateOutlerInjector feature staying in the same and familiar context of the WeatherComponent component.
Thanks for another useful video, Dmytro
My pleasure:)
You are the best thanks very much 3>
Great stuff, would it be possible to have another video in the future for more advance use cases on ngTemplateOutlet as well as typing the templateOutlet with the Angular 16 features.
thank you
¡Gracias!
Thank you so much for your support! I appreciate it :)
Thank You!
You're welcome!
Thanks
Insightful lesson, I have a use case for it.
Got a reusable table I need to wire next year and this may be the solution I am gonna run with
Yep, reusable table is a perfect use case and I think ngTemplateOutlet will perfectly work for you.
Great explanation... Thanks. I will share this video with ours juniors, for better understanding...
Awesome, thank you for supporting ! 🙏🏻
Very Informative Pure Class 🙂
Thank you for your feedback! I am glad that you liked it.
thanks lot
wow!!!
Please do content projection as well mate!
After we trip[led our dev team size, we are juti n the process of standardising our components (so not every squad reinvents the dialog, the context-hint bar, etc).
We have a bunch of good and keen Angular devs, but also many "fullstack :D" ppl not very comfortable with the framework.
explaining to them how to create reusable components is so difficult, but this one is a great overview of embedded templates! Would be awesome to ahve content projection as well.
Great content and example, as always. One disadvantage of the ng-template context is that is not typified in when used (let-state) this could be a big problem on refactoring. I hope angular does something about this.
Yeah...I also hope that it will be supported out of the box.
Great video Dmytro. Would be great to have a course like the forms one, but for those Angular core middle or advanced topics.
This is very interesting. I plan 2 new courses in the next year. Let's see what i come up with ;)
@@DecodedFrontend Great Dmytro. Many thanks for your quick reply.
Can you pls explain content projection
1. With slots
2. With styling - do we need to add the styles in the projected component or in the component where the content is passed ?
When viewencapsularion is emulated the ngcontent and nghost classes in Dom seems different
Pls explain them as well.
Thanks
Thank you for suggestion :) I will definitely cover those things
Greate video, please make the ng-content video!!!
Not going to lie, you're a damn legend. But I'm only left a bit with my head scratching around 29:43 - does injecting the Injector provide the reference of the WeatherWidgetComponent? That feels almost a bit "magical" to me! How was the problem with the lack of the component reference solved before? Did people simply pass the function into the ngTemplateOutletContext? I can't remember if you did any blog content for these injectors, but if you didn't I would really, really love those. Thank you for making things easier for us! Without you, I would have been lost in Angular long ago. Nobody touches upon more advanced topics like you do.
Content projection 🙏🏻
Great video, thanks, i think that's an amazing feature
Yep, I am agree!
@@DecodedFrontend i wish your country has a better year in that 2023, wich is very close and thanks for share your knowledge with us, good bless you, your family and your country
@@haroldpepete Thank you so much, I appreciate it so much.
How do you create a typed template context and template ref
Awesome as usual. Quick correction: @ 9: 50 you mean IMPERATIVE paradigm. You then correctly reference implementing via a DECLARATIVE paradigm.
very useful and helpful with of course high quality, not sure if my suggestion is right, because I find this speaking pace seems to me slow, maybe increase a bit speed of speaking would get more attractions. :)
Great!! Just question. How di you access ngtemplate direttive file from vs code? If i ctrl +click the ngtemplateoutelet i see only the d.ts file and not the typescript.
Hi!! greetings from Colombia!! you videos are excellent and help me a lot to improve my code a 100% Would be nice if you start teaching IONIC with angular!!! Thanks for exists bro!
Great tming, hello I have lots of nesting in html template(I'm working with forms) and I was thinking aoubt using template to make it more readable. Is it good idea or should I solve in another way?
Dmytro, seeing that not only in the comments of this video, but in others also, people that I guess (hope) to be subscribers of your channel mention topics they are interested in for the future videos of yours, I was wondering: would it make sense to you or could it be a win / win strategy if you would start something like a free options poll / list / for topics we would be interested in for your following CZcams videos / paid courses ? Just some food for thought. I know I would be interested in a few specific topics and possibly others also.
Using the structural directive syntax *ngTemplateOutlet="templateName; context: { $implicit: variable, color: 'blue' }" we can specify all the information together. I suppose in Angular 14 they extend this to support the injector value
why not just give provide state & action at root or app.component level & inject both at other places where we want to use state & action since that will be one single instance available at all place? also is inject one component in other component good pratice ? cuz generally it is service that we inject
Could you create a video on angular universal?
I'm using your example and it works fine until I want to trigger an Output event on the parent component it doesn't work, but if I put a console.log inside the function I'm triggering the console log prints the data so it's communicating but for some reason it doesn't trigger the event, would you have any ideas as to why this is happening?
Is it possible to create a single component whose template.html file is filled with a library of snippet which I can then use EVERYWHERE in all my other components?
Much like a service gives us methods we can call from any component ts file. I am unable to get your examples to work, perhaps because I have template in files and NOT in the ts file. My html files have about a 1000 lines so it makes no sense to inline them.
Im trying to build custom table using angular material table, providing custom table row using ngTemplateOutlet is not working or im missing something, any advice
thanks
With Custom weather widget, it's neat but isn't it better to extract methods to reload and copy content to the injectable class? Then either provide it in root or, optionally, this injectable can be provided in parent class providers and injected into custom weather component via ngTemplateInjector.
I mean, it's basically the same, just never seen using imported methods from components. Technically it's clearly possible, just feels wrong.
Great video though, really helpful and clear, love it.
Hi,
Thanks for your video !
Is this approach better than using @ContentChild ?
The use of @ContentChild seems more "appropriate" as the custom template is defined inside my component selector rather than outside.
Or does it depend on the use case ?
If there are multiple components that need to override the template, the @Input will be more convenient as the template will be
defined only once.
Whereas it will be defined inside each component with the use of @ContentChild ?
💥
How do you do to make the HTML code colored? When I use HTML in the component, it displays with only one color, all orange
please make more and more videos please. we love u
There will be more cool vids ;)
Personally, I prefer using ngComponentPortal and using an interface to bridge the data. So I can associate each component with a key in an object and change the components through this key
In the last example I feel like you allow a kind of circular dependency but the angular compiler does not report anything about it. Maybe I am wrong
Im trying to pass method inside context. I want trigger this method with click. Now i'm able to pass function, but is triggered no only from click. Have u ever tried same thing?
Somehow I got distracted by your cat : )
Excellent video Dmytro
😁
Informative video. I do have a question, why didn't we use ng-content for dynamic content in a widget container. Additionally, I think the widget component should be dummy (no data)
Please create video on ng-content
How can the solution that the ngTemplateOutletInjector brings be done in Angular versions lower than 14?
You can provide injector (or particular service you need) of WeatherComponent via template context and then from the context provide to the target component as an input and fetch dependencies from there. Maybe there are another workarounds but I heard only about this one.
Спасибо, Дмитрий, вы мой Сенсей! В очередной раз благодаря вашим наставлениям я решил две проблемы которые не давали мне спокойно спать)) Спасибо!!! Ждем проекцию контента.
One thing I don't understand (and the main reason I watched your video) is why didn't we pass the actions in the context for the template the same way we did for the state?
I have a component which content can be changed by the user's template but I have a couple of actions I would like to execute in the component from the personalized templates.
I tried passing the methods in the context, but when the execution reaches a reference to "this", "this" is undefined and I don't know why
You could set a type of TemplateRef using ngTemplateContextGuard
Yep, this is exactly the solution to fix typings issue but it also requires additional “dummy” directive for the type inversion. Just a ContextGuard in WeatherWidget won’t work unfortunately.
Can the template outlet use components that have their own template outlets, who in turn have their own template outlets (recursive template outlets-ish) ?
Sure, they can have :)
Watching this video made me realize I know nothing about templates after working 4 years with Angular. I mean I used all of this before but not like this 😅
You can't imagine how often it happens to me as well :D
🙏🙏🙏
21:18 is there any way to access state within AppComponent class?
Yes. You can get a reference to WeatherWidgetComponent like `@ViewChild(WeatherWidgetComponent) widget!: WeatherWidgetComponent;` and then this.widget.state
@@DecodedFrontend If state within WeatherWidgetComponent is protected, do we have any options. Something with ng-template or so?
Luka Doncic at it again!
Hi Dymtro, you content is really great and I am from India and I liked it so much, can I know how you check library source code in vs code itself in same project?
Hi :) It is actually not the "source code in the same project". I just had another VS code window with angular source code opened and on post-production I just cut the transition, so it looks like I jumped immediately to source code which is not really true.
@@DecodedFrontend oh okay thank you.
Good topic