Introduction

This is a directive that is always neglected and people tend to not use it. Either because they do not fully understand the use cases or simply because they don’t know they exist. I have seen it! I know!

When I first encountered it I wasn’t really sure where and why I would need it when I could simply create another component, or a switch case.

It brings dynamic to your template and you can create reusable components with ease.

It’s great for performance reasons and simplicity.

Getting Started with NgTemplateOutlet

What exactly is ngTemplateOutlet?

It is a structural directive that allows you to render templates dynamically. Pieces of HTML that is used to define the user interface of a component.

Of Course in 99% of cases you will import the commonModule itself and not specifically the NgTemplateOutlet, but I wanted to highlight to you where exactly it is.

First, we define the template - in our case it is #details and I want to point out that this is not the position it will be rendered! We are merely defining it. The position it will be rendered is where the ng-container is located with the correct variable. The template is NOT rendered by default.

Angular will replace the content in the ng-container with the information we have inside the template

Understanding the Directive

Behind the scenes Angular is creating a new view and setting variables for the template we create. This directive takes an object as its input and Angular creates a new scope for us. It fills the template with the information we provide inside

Under the hood Angular creates a template and we can reuse it in different conditions.

What is different with that Directive is that it has its context. We can pass data and work with the template dynamically.

Let’s give an example:

As you can see in the example - I define a property called “user_name” inside the ng-template and assign it to “name”. And that name is passed from the “context” in the ngTemplateOutlet.

I have to admit that the first time I encountered that I was a bit confused, but after a while it all makes sense.

Usage of NgTemplateOutlet

As I stated in the title - it is the way I usually use the ngTemplateOutlet. And the most often use case I do use it for is to create and control tables.

I will explain more on this, but let’s mention another use case - it could be used for rendering dynamic information and to reuse code in the template, if you don’t want to create another component.

Simple and yet effective. Since you can pass information, you create your mini separate component directly in the template.
Another use case I sometimes find myself is to “separate” logic in the template.

Let's describe it as a “method” in the HTML template. It’s great since I can provide params into the “function” and it works perfectly.

It's great to divide logic.

Conclusion

In part two I will create a demo repo with examples on the way I use it for tables.

I have been planning on this for a long time, because I always wanted to create a configurable table I would use on many occasions and on many projects.

I am going to build it and publish it as a package, in order to reuse it myself.

There are great and awesome libraries out there, but I always find unique cases that force me to fight the library in order to get something done.

So in a sense I am gonna build it for myself, but hey, if you find it useful - I am happy!

Stay tuned, follow and feel free to contact me.