DEV Community

loading...
Cover image for Understanding Content Projection in Angular
Angular

Understanding Content Projection in Angular

Carlos Caballero
I'm PhD. in Computer Science from Málaga, Spain. Currently, I am teaching developers and degree/master computer science how to be experts in web technologies and computer science.
Originally published at carloscaballero.io ・2 min read

Content projection, what is it?

Content projection (also known as transclusion) is a way to import HTML content
from outside the component and insert that content into the component’s template
in a designated spot.

Therefore, using content-projection you can obtain the result shown in the
following image.

Notice that the component works like a mirror. Another more complicated example
in the one shown in the following image in which a letter with user data is
being configured.

I saw a ng-container, what is that?

The Angular ng-container is a grouping element (syntax element) that doesn’t
interfere with styles or layout because Angular doesn’t put it in the DOM.

And we can use structural directives with it.

Structural… What?

A Structural directive changes the DOM layout by adding, removing or
manipulating DOM elements.

And then can I…?

where am-icon is the following component:

The result is an icon instead of four, just as we expected. 💔

How does ng-content work?

  • ng-content doesn’t produce content. It simply projects the existing content
  • consistency of expectations 👀
  • performance 🔥
  • Following the previous rule, it can neither create nor destroy components projected (lifecycle).
  • Only the last ng-content projects the content.

And… what can I do? Here ng-template comes to the rescue…

What is a ng-template?
As the name suggests, it is a template element,
a model which you can instantiate, hence you can set a template as a component’s
input, which is pretty useful.

The asterisk (*) syntax

The asterisk is syntactic sugar for something a bit more complicated.

You usually see with: *ngIf, *ngFor, *anyDirective, …

Then our repeat component?

Explain me what that ngTemplateOutlet is!

The ngTemplateOutlet directive receives a ng-template and it’s responsible
for create the instance and insert it into the DOM.

Yeah, context like in JS!

We can give an object to the instance, which is created by the
ngTemplateOutlet, of your ng-template. That object can contain whatever you
want to pass to your template. Here, we expose the magic of a lot of library
components (datatables, angular-material, ng-bootstrap, …).

We can do awesome things!

More more more…

Originally published at https://carloscaballero.io on June 6, 2019.

Discussion (7)

Collapse
yemolai profile image
Romulo G Rodrigues

Oh, so that's the name transclusion have in the new Angular! I was curious about it as I use it a lot in Vue as named slots. Good to know. :)

Collapse
carlillo profile image
Carlos Caballero Author

Hi @Romulo,

Yes, It is!

:-)

Collapse
rconr007 profile image
rconr007

Thanks for the article, it really shines some light into this topic.

Collapse
pierre profile image
Pierre-Henry Soria ✨

Outstanding article! Thanks!

Collapse
carlillo profile image
Carlos Caballero Author

Thank you Pierre-Henry.
😊

Collapse
petros0 profile image
Petros Stergioulas

Great article! But please next time, make bigger pictures :D

Collapse
sanketmaru profile image
Sanket Maru

Nice explanation of the projection concepts in Angular. One of the use case i have presented in my blog too here sanketmaru.github.io/posts/ng-temp....