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!
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.