Angular ng-template, ng-container and ngTemplateOutlet - The Complete Guide To Angular Templates

This repository is the support code for the blog post:

Angular ng-template, ng-container and ngTemplateOutlet - The Complete Guide To Angular Templates.

In this post, we are going to dive into some of the more advanced features of Angular Core!

You have probably already come across with the ng-template Angular core directive, such as for example while using ngIf/else, or ngSwitch.

The ng-template directive and the related ngTemplateOutlet directive are very powerful Angular features that support a wide variety of advanced use cases.

These directives are frequently used with ng-container, and because these directives are designed to be used together, it will help if we learn them all in one go, as we will have more context around each directive.

Let's then see some of the more advanced use cases that these directives enable. Note: All the code for this post can be found in this Github repository.

Table Of Contents

In this post, we will be going over the following topics:

• Introduction to the ng-template directive
• Template Input Variables
• The ng-template directive use with ngIf
• ngIf de-suggared syntax and ng-template
• ng-template template references and the TemplateRef injectable
• Configurable Components with Template Partial @Inputs
• The ng-container directive, when to use it?
• Dynamic Template with the ngTemplateOutlet custom directive
• Template outlet @Input Properties
• Final Combined Example
• Summary and Conclusions