Too many ngSwitch? Meet ngTemplateOutlet

What is ngTemplateOutlet?

ngTemplateOutlet is a structural directive in Angular that allows you to insert a template into the DOM based on a condition.

It is particularly useful when you need to render different content based on specific conditions. The key advantage of using ngTemplateOutlet over other conditional rendering techniques, such as ngIf or ngSwitch, is its ability to create reusable and modular template structures.

Getting Started

To demonstrate the use of ngTemplateOutlet, I will use an Angular application that displays user cards. You can find this application in the following link: Stackblitz: ngTemplateOutlet Example Application

In the application, each user card will display the user’s name, email and user type. And we will have a different card for each user type. In our example application: basic and premium.
In order to differentiate each one in our application the premium user card we will also display the membership expiry date. (but this could be a much more different and complex template)

To do this we have a component whose html has defined two different templates, and passes to ngTemplateOutlet the one corresponding to each user type

In the code above, we define two ng-template elements: basicUserCard and premiumUserCard. These templates define the structure of the basic and premium user cards, respectively.

The ng-container element uses the *ngTemplateOutlet directive to dynamically insert the appropriate user card template based on the user type. The activeTemplate variable is defined in the component to determine which template to use.

You probably noticed the let-user variable in the template. This comes from a variable defined in the ngTemplateOutlet context ($implicit:user) which can be used inside the ng-template, this is how we get the user object properties into the template

In the component we create a getUserCardTempalte(user) method that takes a user argument to determine which template to use based on the user type

Additional Tips and Best Practices

1. Use ngTemplateOutlet when you have a larger number of templates or need to reuse them across multiple components. This approach provides more flexibility and modularity compared to using ngIf or ngSwitch.

2. You can pass additional data to the templates by extending the context object. For example:

   

   And in the template, you can access the additional data using the let-someData syntax:

   

    

3. ngTemplateOutlet can also be used in combination with ng-container and other structural directives to create more complex, dynamic layouts.

Conclusion

We have about ngTemplateOutlet, a versatile directive which allows for greater modularity and maintainability in your applications by offering a clean and efficient way to organize templates.

We have seen how you can create independent templates and enrich them with extra data with ngTemplateOutlet context. If you find yourself reaching for several ngSwitchCase in your code, consider if it would be cleaner to leverage ngTemplateOutlet capabilities