Understanding Content Projection in Angular
Tags: angular, webdeveloper, transclusion, contentprojection
Published: 2019-06-06 08:33:10

---
title: Understanding Content Projection in Angular
published: true
description: 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.
tags: angular, webdeveloper, transclusion, content-projection
canonical_url: https://www.carloscaballero.io/understanding-content-projection-in-angular
cover_image: https://cdn-images-1.medium.com/max/1000/0*pk5PbZUuW8FGwFmS.png
---


### 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.

![](https://cdn-images-1.medium.com/max/1000/0*4WsQ3ww9rk2K7zmY.png)

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.

![](https://cdn-images-1.medium.com/max/1000/0*K-a_YvW5BmDIqe2c.png)

**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…?**

![](https://cdn-images-1.medium.com/max/1000/0*VoCmlu_pAqH6XFMX.png)

where `am-icon` is the following component:

![](https://cdn-images-1.medium.com/max/1000/1*GPArrg3qDWVEsM2L7hHkzA.png)

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

![](https://cdn-images-1.medium.com/max/1000/0*hi2BHFo3lj7A15Yv.png)

### How does ng-content work?

* **ng-content** doesn’t produce content. It simply projects the existing content
* consistency of expectations 👀
* performance 🔥
* <br> 
* 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…**

![](https://cdn-images-1.medium.com/max/1000/0*TdpQI3h19CwsHolb.png)

**What is a ng-template?** <br> 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, …

![](https://cdn-images-1.medium.com/max/1000/0*It_YBGVJBxRvIdqC.png)

**Then our repeat component?**

![](https://cdn-images-1.medium.com/max/1000/0*XI4UgqiHedvIr33D.png)

![](https://cdn-images-1.medium.com/max/1000/0*vzylM6hLR6skusX3.png)

**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.

![](https://cdn-images-1.medium.com/max/1000/0*0nf7-yJglL59RXkR.png)

### 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!

![](https://cdn-images-1.medium.com/max/1000/0*pk5PbZUuW8FGwFmS.png)


### More more more…

* [Presentation](https://caballerog.github.io/ng-transclusion/slides/)
* The GitHub branch of this post is
[https://github.com/Caballerog/ng-transclusion/](https://github.com/Caballerog/ng-transclusion/)

*Originally published at [https://carloscaballero.io](https://www.carloscaballero.io/understanding-content-projection-in-angular/) on June 6, 2019.*