Dynamic load component with wrapper

loading-component-dynamically.ts

// Components in ngIf & ngSwitch loaded when used
// With ngxd lib we can create "lazy wrapper"

import { ChangeDetectionStrategy, EventEmitter } from "@angular/core";

// https://www.npmjs.com/package/@ngxd/core
// https://github.com/IndigoSoft/ngxd/issues/30

// You can use Dynamic component loader service
// - Which respect component module, providers, context

@Component({
    selector: 'my-lazy-chart-component',
    tempate: `
      <ng-container *ngIf="component$ | async as c">
        <ng-template
          [ngxComponentOutlet]="c.componentFactory.componentType"
          [ngxComponentOutletInjector]="c.injector">
        </ng-template>
      </ng-container>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyLazyChartComponent {
    @Input() data?: CharacterData;
    @Input() disableZoom: boolean = true;

    @Output() readonly fullscreenTrigger = new EventEmitter();

    component$ = import(
        './path-to-actual-chart-component/my-chart.component'
    ).then(m => m.MyChartComponent);
}