How to render a component inside another component angular 10

Question

I have a situation in which I have to render a component inside another component just like a div inside another div. Let's suppose there are two components HStack & Button, I want to be able to do something like this from any other component using the above two:

<HStack>
  <Button>Similar kind of nesting here!</Button>
</HStack>

How can I achieve this? Any help will be highly appreciated!!

Answer 1

What you’re looking for is content projection.

Sample code:

import { Component } from '@angular/core';

@Component({
  selector: 'HStack',
  template: `
  <ng-content></ng-content>
`
})
export class HStack {}

How to use:

<HStack>
  <Button>Similar kind of nesting here!</Button>
</HStack>