Angular Discussion Frontend

Creating Reusable Components with NgTemplateOutlet in Angular

NgTemplateOutlet inserts an embedded view from a prepared TemplateRef. Using NgTemplateOutlet instead of creating specific components allows for components to be easily modified for various use cases without having to modify the component itself!

The templates will be TemplateRefs using <ng-template> and the stamps will be EmbeddedViewRefs created from the TemplateRefs. EmbeddedViewRefs represent views in Angular with their own context and are the smallest essential building block.

Angular provides an easy way to use this concept of stamping out views from templates with NgTemplateOutlet.

NgTemplateOutlet is a directive that takes a TemplateRef and context and stamps out an EmbeddedViewRef with the provided context. The context is accessed on the template via
let-{{templateVariableName}}=“contextProperty”
attributes to create a variable the template can use. If a context property name is not provided, it will choose the $implicit property.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *