No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
sample-app ng-template post Jul 27, 2017 Update Aug 8, 2017

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