Angular - 在自定义组件中渲染组件

Question

I have the following code:

<app-device [device]="device">
        <app-custom-slide-toggle></app-custom-slide-toggle>
        <app-custom-checkbox-list></app-custom-checkbox-list>
      </app-device>

How I can show my app-custom-slide-toggle , app-custom-checkbox-list components in a specific location inside my app-device component?

I was reading about loading dynamic components, but couldn't figure how how to make it work in compuond components.

Thanks!

Answer 1

It's content projection.

<app-device [device]="device">
  <app-custom-slide-toggle slot-one></app-custom-slide-toggle>
  <app-custom-checkbox-list slot-two></app-custom-checkbox-list>
</app-device>

And now in AppDeviceComponent we should make slots for content:

<!-- device.component.html -->
<div>
    <div class="slot-1">
        <ng-content select="[slot-one]"></ng-content>
    </div>
    <div class="slot-2">
        <ng-content select="[slot-two]"></ng-content>
    </div>
</div>

Another cases with detailed description are here .