Why, when and how use this sintaxis in Angular?

Question

I was looking for information about dependency Injection and then I found this article:

https://medium.com/angular-chile/inyecci%C3%B3n-de-componentes-y-directivas-en-angular-6ae75f64be66

In there I saw this syntax

   <ui-card>
  <h1>Your daily @agadmator quote</h1>
  <p>Congratulations! You are an excellent analyzer of hypothetical end game positions and that never actually happened.</p>
</ui-card>

and it caught my attention.

I believed that nothing can go between a custom angular tag (a custom tag selector).

I would like to know more information about it but I don't know what search terms to use and how that syntax works.

Could you help me explaining or sharing information about it please?

Answer 1

That is called "Content Projection" (previously called "transclusion").

Check a tutorial about how that's used here: https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

In brief, to pass data to your components you usually do this:

<my-card [content]="myVar"></my-card>

But, when you need to pass other HTML elements, you can use content projection:

<my-card>
    <h1>Hello world</h1>
</my-card>

Inside of the MyCardComponent you can access that content with a special tag <ng-content>.