What's the Angular equivalent of Vue <slot/>?

Question

Example:

Parent component:

<div> 
  Hello <slot/>!
</div>

Child Component:

<div> 
  World 
</div>

App component:

<Parent> 
  <Child/> 
</Parent>

Output: Hello World!

Answer 1

We have something like this in Angular.

The directive <ng-content> is used to project outer content into the current component, and you can use a selector to project specific content with a CSS style query.

app-example.html:

<div>
   <ng-content></ng-content>
</div>
<div>
   <ng-content selector=".child"></ng-content>
</div>

app-component.html

<app-example>
   <span class="child">World</span>
   Hello
</app-example>

Renders this output:

<app-example>
  <div>Hello</div>
  <div><span class="child">World</span></div>
</app-example>

Answer 2

Content Projection

In angular its called "Content Projection", and there are three types

1) Single-slot content projection With this type of content projection, a component accepts content from a single source.

Is content projection cool?

2) Multi-slot content projection Is content projection cool?

Let's learn about content projection!

In this scenario, a component accepts content from multiple sources.

3) Conditional content projection Components that use conditional content projection render content only when specific conditions are met.

Source: https://angular.io/guide/content-projection