A Useful Trick with `ng-container`
Let’s learn the `ng-container` trick for directives.
We'll cover the following...
The <ng-container> directive is very powerful, and we should definitely learn to use it. In this lesson, we’ll learn a useful trick that will be quite handy when we work with structural directives.
The ng-container
This directive is especially useful for us because it adds an element to the HTML template that we can use, but Angular removes it during the render time. In other words, we can use as many ng-container elements as we want, and it does not influence the number of DOM nodes at all.
Why is this so useful?
The following few examples demonstrate the usefulness of this directive.
<img [src]="user.avatar"">
<article>
<p> {{ user.name }} </p>
<p> {{ user.mailAddress }} </p>
</article>
We’ll start with a simple template for displaying the user’s ...