ngTemplateOutlet is WAY more useful than I realised 

Join my mailing list for more exclusive content and access to the archive of my private tips of the week: mobirony.ck.page/4a331b9076

Yeah, I followed the same path from Twitter posts and went back to the basics to grasp this feature better. I ended up in the source code of PrimeNg - that I use in my actual job daily - and I love it ! I'm glad to see that the Angular folks keep on sharing that kind of stuff so wee all grow ! Cheers :)

Great video! Totally changed my perspective on ngTemplateOutlet ! Usually all examples out there are just plain simple that really do not make sense to use. Keep up the good work and it would be great if u can make more such videos explaining "ambigious" topics

Your channel is gold man, I'm going to share it with my job partners!

Your video gave me an idea how I could refactoring messy table in our project. Thanks! Great Video

Thanks for sharing a detailed explanation Josh! If I knew about this a few months earlier, my code would have looked a lot better as I ended up having a reusable component where I had to "configure" wether some parts of the template should be rendered or not.

Really well explained mate. Great stuff.

Thanks for the videos, really helpful content. Please keep making those.

A very very useful information provided and explained. Awesome work thanks for sharing.

The sad thing is that there's hardly any documentation about it on official angular docs I.e examples etc

Thank you for this video, I’m going to share it with my coworkers. Our in house table component is a ‘component’ as per your example, and it takes this monster ‘columnConfig’ object. Our table does sorting, filtering, pagination and supports any number of action buttons as the last column. We do not use ngTemplateOutlet, I’m sure everyone will agree it’s better and maybe worth building a new table component that uses it.

Great explanation, thank you for sharing @Joshua.

I love your videos on Angular! The best

Your video definitely helped with this feature! Shukran! 😊😊

this is amazing! I can't wait to try it out

This is black magic. So cool. I've used primeng table a lot lately and I always wondered how does table pass value to `let-row`

Wow, Amazing, I had no idea about this, a well deserved like!

Very good material pls make more from Angular. I love this framework!

Great video! I think I speak for all that features like this are not very well documented in the angular docs and we would appreciate more videos about advanced angular features. Thanks!

Super helpful! Thank you!

Thank you. Great content, great channel. ❤

Great video. I was just experimenting with ngTemplateOutlet on stackblitz yesterday... I did one extra thing and that is binding a function to the template passed in content projection. Not sure whether that is an optimized way or not but it worked except the type checking.

Hey, what a great content you have! Subscribed

You can even use this with service. Ex: In root router component, when you want specific layout to dynamic like button or even a dialog. Just create service and observable to listen and set. And inject the service from whatever children component with TemplatePortal and use it with viewchild decorator

Thank you! Keep going! awesome video!

Nice video! 💯 I have implemented the second solution in one of my projects, but with less code.

Great video. Thanks a lot.

Good quality education. Thanks!

Useful video!

Great explanation.

Great content as awlays. I'm interested in seeing how would customizing a specific table column would like. The current setup seems you need to redo all your your columns when you want to customize a single column like include an icon for column name.

Subscribed. Great video, thanks for sharing.

I love you, Thanks for this really instructive video 👍😁

Thank you - this is really helpful

As soon as the twitter message suggested a table i chuckled thinking that is the perfect way to showcase this feature.

I didn't just like the video; I also added it to the special list. Joshua, you are a fantastic content producer. Thanks.

It really helps. thanks a lot

Great content thanks a lot !

i learned about this when i was trying to reproduce react's render prop concept in angular

Great video and superb explanation. Please do a similar video for ngComponentOutlet?

This will change my life, thanks Josh😅

@JoshuaMorony, thanks for the video. It was really helpful, but at the same time it reminded me of why I didn't like it when I've encountered it in the past. I am typing freak. Whenever I see the 'any' type I go bananas. Using this approach, the 'let-*' variables in the template will be of type 'any', which means no autocomplete/intellisense and can easily lead to errors that can be spotted only at runtime. I haven't had the chance of running into a similar scenario but here's one for ya: An ng-container with *ngFor that loops through some list of objects. Within this container, the type of the items is properly inferred, which is great. Let's say I need an ng-template that I can project into a child component of this container. Placing the ng-template inside the container works, we have typing, but at the same time we're creating a separate template instance for each item. Moving the ng-template outside the ng-container looses the typing. How can I go about that? Thanks again. Edit: I found your next video that tackles this exact issue (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dau7kQMdH4A.html). Thanks!

good work

We can also use this to have a reactive form benefitting from the async pipe

Really interesting video. I think I have used ngTemplateOutlet before, but can't quite remember the use case. I think it had something to do with using different inputs based on some condition. One feedback I would like to give: On small screens in the dark it is hard to read the actual. The contrast to the bright output on the right makes it hard on the eyes. I ended up blocking of half the screen with my hand.

This is a great example, basically allows you to write a reusable component, but give the flexibility that can't be given using normal components. I have seen ngtemplateoutput used a lot in the code base at work, and until seeing this I just wasn't sure if the benefit. it allows you to encapsulate display logic in a component, but allow the component using the re usable component to override this if needed. I still think it is over used on our current code base, but now have a better understanding when this technique should be used.

amazing!

Please make a video on Angular Life Cycle Hooks in detail with examples. Thanks

My use case on this was a CRUD page. I had a component doing a create operation, another one for editing, another one for reading.. As it turns out, they all are 80% similar. Creating lots of components for similar stuff would have too much copied code. Instead, I created a bunch of templates and just switched them up based on the route of the page. If it's create, I'd use templates 1,2 and 3. If it's edit, I'd use 2, 3 and 5.. and so on.

Cool. Universal Studios Orlando uses this

Hey, what did you use to read the template string as html and not a string?

It’s like slots of a web component, nice

Super cool! In short, I'd say ngTemplateOutlet is useful when the data sent to the dumb component should be rendered differently depending on the context of use. But I guess ng-content could also do the trick? I wonder if you've tried with ng-content as well.

great!

Please make videos on Angular universal

Hi @Joshua, Thanks for the video. I have a question regarding ng-template usage in template. Isn't it hard to do unit testing when we use ng-template for dynamically display content in template (component.html) ?

I'm trying to build a custom table using angular material table, and providing a custom table row using ngTemplateOutlet is not working or Im just missing something.. Any advice I'd be grateful.

thanks

Wow, this is amazing, thank you. I didn't think you could do this in Angular! However, I think that this is still waaay too janky, and not well documented, compared to other frameworks (in React this is just basic stuff with render props)... It would be nice if Angular Dev Team will improve this pattern in the future!

Good information in here for sure. I still wrestle with why though. If you have to pass in a template for any variation, we lose reusability. IMO, if I have to write a template every time I use the component, why even use the component? Currently in our, as this video would call it, messy custom table implementation, we pass in an array of column definition objects, and then the data itself. The column definitions determine how the data is displayed, order of columns, and any non standard header behavior, etc. The component itself is a beast, but using it is a breeze.

HI, can I ask a small question about displaying object data to the page when the values of the object have not yet come from the server, and the console throws undefined values until the data is fetched. This has been bothering me for some time and I don't know what solution to use, any advice would be amazing. I could initialize every single field of the object but I'm sure there is a better than this.

kinda interesting what kind and how big your projects were that you can't find a use case for ngTemplateOutlet

Can we pass in a method in thr context ?

I've a question A parent component and we pass children components by router-outlet , & if we want to pass value @Input I know we can use service here but I want to use @Input here

I get why ngTemplateOutlet is easier, and I think there's no right and wrong way of doing this, it falls down to what you're trying to achieve. But in my opinion, both these methods you showed are messy, and I'm certainly not choosing the lesser evil xD. I think there should be a much much cleaner way of doing things. Currently working on making a widget library for an internal framework in this company I work for (they're vendors, and it's sad that they have to keep rebuilding things for every new requirements), high level widgets that are highly customizable based on the data model (well I guess the right term is a view model), and I definitely won't go for that first method you showed, I also already have 1 other approach that involves almost no complexity on the template layer. But currently, I'm just arranging ideas, haven't really settled on one and maybe I'm wrong, but I know what not to do at least. I want to keep the template layers as clean as possible so my UIUX team can focus on pure styling principles and not be bothered by angular's nuances.

11:09 my eyes, my eyes.

I've been using templates like this for a while. The only thing I don't like is the lack of typing for the Context object and its use in the let-contextprop attributes.

What will you do if you need to rerender data inside ng-template? Take a try and you will see the problem with ng-templates. Better to use a component for price and change showed value inside "ngOnChanges" life cycle hook.😉

keep it

Nice video. However, in the final "ugly" version, couldn't it have been a bit more flexible if you had used ng-content with named slots? Basically allow consumers to project content into the data table instead of using all those inputs.

If you are already iterating over your dataset in a preprocessing step why not simply inject a button component into the results? You are combining business logic with display logic in your component example and that overcomplicates it. If you're using buttons, you're using a button component that knows how to handle clicks. But all that said, I appreciate the NG template explanation. I've struggled with it in the past but this helps the it all together.

I think that can also be done with ng-content...

What is the use of context in thead?

Why not just create three separate components instead of one component that supports multiple use cases? Components are easy to create. My personal opinion is that components should be as simple as possible.

Funny that you have to explicitly tell it that a value is implicit 😂

forget that. just create different components 🤣

Angular is not useful at all, its a nightmare 😂

My current SOP would have used viewContainerRef.createComponent for the child elements. This seems to have a lot less boilerplate then createComponent especially if the created components are not going to be consumed anywhere else.

ngOutletTemplate is crap, because it is too limited: it does not support the essential create/destroy events, and no access to the component instance. The only good way is to implement it all yourself, which is what I did for my projects. If interested how I did it - reply to me with contact email, I will send you an example. It is possible that Angular v15 will get a proper ngOutletTemplate support finally.