Angular - Render components inside custom component

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!

Mikhail Filchushkin · Accepted Answer · 2021-02-28 14:22:29Z

3

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.

answered Feb 28, 2021 at 14:22

Mikhail Filchushkin

3301 gold badge3 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Render components inside custom component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related