Search code examples
javascriptangularvue.jscomponents

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

Example:

Parent component:

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

Child Component:

<div> 
  World 
</div>

App component:

<Parent> 
  <Child/> 
</Parent>

Output: Hello World!

Solution

  • 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>