In many cases we need to change the content of a component dynamically — for instance, to allow the user to change view, or to let the children render data retrieved and processed by its parent component. Below, we are going to show some techniques for creating a component without deciding in advance how the data will be shown. According to the application’s needs, each technique has its own strengths, but all of them encourage component reusability. We are going to describe:
- Content projection
- Dynamic templates
- Dynamic component creation
All the code is available on github and Stackblitz.
Projection#
This is the simplest technique, and it allows the component user to decide what to show within the component. This could be useful, for example, if we want a container component to decide the main content structure without forcing what will be rendered in a certain section.
First of all, we need to use the ng-content tag in the dynamic component.
Then, when we use the component, we could include all the content we want within the new component tag.
A more flexible way to use content projection can be achieved by using the class selector. In this case, the dynamic content specifies, using a class selector, where the content will be injected.
Now, in the component user, we could include two elements that will be injected in the component.
Dynamic Template#
Dynamic template is very easy to use, but it comes with some problems in terms of flexibility, so it could be a good choice for simple mechanisms to be implemented. A typical example could be rendering one of two elements according to a condition.
It could also be very useful for avoiding repetition of template parts, by writing the HTML part once and using the template context to pass data to the template.
Dynamic Component creation#
Dynamic component creation is by far the most flexible technique to use, because it allows you to choose the instant at which the component will be created. On the other hand, it is the most complicated to write, even if, after the first few times, everything becomes clearer and easier to repeat.
To implement this technique we need:
a container tag directive, used to reference the container from within the parent component, to tag where the new child component will be rendered.
from the parent component, we need to reference the container using the
@ViewChildannotation.in the parent component, we use the
ComponentFactoryResolverto create an instance of the component to be created
Conclusions#
As in many other cases in programming, there are different ways to accomplish the same task, but it often depends on what the software requirements are and what result we want to achieve. This article isn’t intended to be a detailed guide to these techniques, but only a general description of some of the possibilities Angular offers for dynamically rendering content within a component.