Is it possible to extend a Template in Angular 2?

Question

I am wondering if it's possible to take the html (and directives) that are already in one component's template and include them in some way in another component's template. This would be useful where one would be extending an existing component and would like to use its existing template but add some additional html/directives.

In Twig (a popular php templating library) for example it's possible to extend a template:

{% extends "base.html" %}

{% block title %}Index{% endblock %}
{% block head %}
    {{ parent() }}
    <style type="text/css">
        .important { color: #336699; }
    </style>
{% endblock %}
{% block content %}
    <h1>Index</h1>
    <p class="important">
        Welcome on my awesome homepage.
    </p>
{% endblock %}

Is there any such thing like this in Angular 2? Again I'm not looking to embed an existing component but instead extend one.

Answer 1

If you have a chunk of html inside template tags, you can use ngTemplateOutlet without having to create a new component:

https://angular.io/api/common/NgTemplateOutlet

You could probably come up with a creative way of sharing the templates so that they are usable by multiple components.

For instance, a parent could acquire the TemplateRef using a ViewChild, then pass that in to an Input property on a child component.

You can find more information about those techniques here:

http://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/