Configurable templates

In Angular, you can create view templates with the aid of the ng-template element. Once you have generated a template, you can pass it to the reusable component with the aid of content projection:

Each view template has an appropriate directive applied, so that it’s possible to distinguish between them. All directives expose a reference to the view template, it has been applied to:

Next, you can grab a reference to the underlying view template using ContentChild decorator with a directive class name passed as its argument:

In addition to template getters, there are also getters for context objects that are passed to the view templates, which can be accessed with the let-propName syntax.

Finally, the view templates are rendered in appropriate slots within the custom-counter component’s layout with the aid of *ngTemplateOutlet directive. Since it’s optional to pass a view template for each view element, a default template is rendered if a custom one is not present: