How to use ng-dynamic-component - 10 common examples

// UI router components (NOT routes!)
    UIRouterModule,
    // Angular browser + common module
    CommonModule,
    // Angular Forms
    FormsModule,
    // Angular CDK
    PortalModule,
    DragDropModule,
    DragulaModule,
    // Our own A11y module
    OpenprojectAccessibilityModule,
    NgSelectModule,
    NgOptionHighlightModule,

    DynamicModule.withComponents([
      VersionAutocompleterComponent,
      WorkPackageAutocompleterComponent,
      TimeEntryWorkPackageAutocompleterComponent,
      CreateAutocompleterComponent]),
  ],
  exports: [
    // Re-export all commonly used
    // modules to DRY
    UIRouterModule,
    CommonModule,
    FormsModule,
    PortalModule,
    DragDropModule,
    OpenprojectAccessibilityModule,
    NgSelectModule,
    NgOptionHighlightModule,

import { TemplateZonesContainerComponent } from './template-sidebar/containers/template-zones.container';
import { TagsContainerComponent } from './template-sidebar/containers/tags.container';
import { IsoZonesContainerComponent } from './template-sidebar/containers/iso-zones.container';
import { TemplateFilterListContainerComponent } from './template-filter-list/containers/template-filter-list.container';
// tslint:disable-next-line
import { TemplateGroupSelectorContainerComponent } from './template-sidebar/template-group/containers/template-group-selector.container';
import { IsoAttachmentFilterSelectorContainerComponent } from './containers/iso-attachment-filter-selector.container';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    MaterialModule,
    ClipboardModule,
    DraggableSelectModule,
    DynamicModule.withComponents([TemplateCardItemComponent, TemplateRowItemComponent]),
    RouterModule,
    TagsModule,
    StoreModule.forFeature('templates', templateReducers),
    StoreModule.forFeature('osTypes', osTypeReducers),
    StoreModule.forFeature('zones', zoneReducers),
    EffectsModule.forFeature([TemplateEffects, OsTypeEffects, ZoneEffects]),
  ],
  declarations: [
    TemplateSidebarComponent,
    BaseTemplateSidebarContainerComponent,
    IsoSidebarComponent,
    IsoAttachmentComponent,
    TemplateActionsSidebarContainerComponent,
    TemplateActionsSidebarComponent,
    TemplateCardItemComponent,
    TemplateRowItemComponent,

* otherwise you might end up with an infinite loop in the router
 * when using `PreloadAllModules` preloading strategy.
 *
 */
@NgModule({
    declarations: [
        LazyComponent,
        LazyDirective
    ],
    exports: [
        LazyComponent,
        LazyDirective
    ],
    imports: [
        CommonModule,
        DynamicModule.withComponents([])
    ],
    providers: [
        /* @HACK: Add an empty array to ROUTE token.
         * Otherwise `PreloadAllModules` preloading strategy ends up in infinite loop. */
        provideRoutes([])
    ]
})
export class ReactiveComponentLoaderModule {

    static forRoot() {
        return {
            ngModule: ReactiveComponentLoaderModule,
            providers: [
                {
                    provide: NgModuleFactoryLoader,
                    useClass: SystemJsNgModuleLoader

injector: Injector,
        viewContainerRef: ViewContainerRef
    ) {

        const ngComponentOutlet = this._ngComponentOutlet = new NgComponentOutlet(viewContainerRef);

        /* @HACK: This hack wraps `DynamicDirective` hacks.
         * Creating a fake `ComponentOutletInjectorDirective` that will allow
         * `DynamicDirective` to grab `componentRef` from `NgComponentOutlet`. */
        const componentOutletInjector: any = {
            get componentRef() {
                return ngComponentOutlet['_componentRef'];
            }
        };

        this._dynamicDirective = new DynamicDirective(
            injector,
            injector.get(IoService),
            DynamicComponent as any,
            componentOutletInjector
        );

    }

@NgModule({
  imports: [
    SuiModule,
    CommonModule,
    ProgramRoutingModule,
    CommonConsumptionModule,
    SlickModule,
    FormsModule,
    ReactiveFormsModule,
    SharedModule,
    CoreModule,
    NgInviewModule,
    TelemetryModule,
    CbseProgramModule,
    DynamicModule.withComponents([CollectionComponent, DashboardComponent])
  ],
  declarations: [
    ProgramComponent,
    OnboardPopupComponent,
    ProgramHeaderComponent,
  ],
  exports: [
    ProgramComponent,
    OnboardPopupComponent
  ]
})
export class ProgramModule {
}

OpAutocompleterComponent,
  OpAutocompleterOptionTemplateDirective,
  OpAutocompleterLabelTemplateDirective,
  OpAutocompleterHeaderTemplateDirective,
];

@NgModule({
  imports: [
    CommonModule,
    OpenprojectCommonModule,
    OpenprojectModalModule,
    OpenprojectInviteUserModalModule,
    NgSelectModule,
    DragulaModule,

    DynamicModule.withComponents(OPENPROJECT_AUTOCOMPLETE_COMPONENTS)
  ],
  exports: OPENPROJECT_AUTOCOMPLETE_COMPONENTS,
  declarations: OPENPROJECT_AUTOCOMPLETE_COMPONENTS
})
export class OpenprojectAutocompleterModule { }

import { AccountStatisticsComponent } from './account-sidebar/account-statistic/account-statistics.component';
import { AccountUserCardComponent } from './account-sidebar/account-users/account-user-card.component';
import { AccountUserEditComponent } from './account-sidebar/account-users/account-user-edit.component';
import { AccountUserPasswordFormComponent } from './account-sidebar/account-users/account-user-password.component';
import { AccountUsersComponent } from './account-sidebar/account-users/account-users.component';
import { AccountCardItemComponent } from './account/card-item/account-card-item.component';
import { AccountRowItemComponent } from './account/row-item/account-row-item.component';
import { AccountCreationDialogComponent } from './creation-form/account-creation-dialog.component';
import { AccountCreationComponent } from './creation-form/account-creation.component';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    MaterialModule,
    DynamicModule.withComponents([AccountCardItemComponent, AccountRowItemComponent]),
    RouterModule,
    DraggableSelectModule,
    StoreModule.forFeature('configurations', configurationReducers),
    StoreModule.forFeature('resourceLimits', resourceLimitsReducers),
    StoreModule.forFeature('resourceCounts', resourceCountsReducers),
    StoreModule.forFeature('accounts', accountReducers),
    StoreModule.forFeature('domains', domainReducers),
    StoreModule.forFeature('roles', roleReducers),
    EffectsModule.forFeature([
      AccountsEffects,
      DomainsEffects,
      RolesEffects,
      ConfigurationEffects,
      ResourceLimitsEffects,
      ResourceCountsEffects,
    ]),

import { VolumeCreationDialogComponent } from './volume-creation/volume-creation-dialog.component';
import { VolumeCreationContainerComponent } from './container/volume-creation.container';
import { VolumeCardItemComponent } from './volume-item/card-item/volume-card-item.component';
import { VolumeRowItemComponent } from './volume-item/row-item/volume-row-item.component';
import { userAccountReducers } from '../reducers/auth/redux/auth.reducers';
import { UserAccountEffects } from '../reducers/auth/redux/auth.effects';
import { VolumeSnapshotDetailsContainerComponent } from './container/volume-snapshot-details.container';
import { virtualMachineReducers } from '../reducers/vm/redux/vm.reducers';
import { VolumeGroupedListComponent } from './volume-list/volume-grouped-list.component';

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    MaterialModule,
    DynamicModule.withComponents([VolumeCardItemComponent, VolumeRowItemComponent]),
    RouterModule,
    SnapshotModule,
    DraggableSelectModule,
    StoreModule.forFeature('volumes', volumeReducers),
    StoreModule.forFeature('virtualMachines', virtualMachineReducers),
    StoreModule.forFeature('userAccount', userAccountReducers),
    StoreModule.forFeature('zones', zoneReducers),
    StoreModule.forFeature('disk-offerings', diskOfferingReducers),
    StoreModule.forFeature('snapshots', snapshotReducers),
    EffectsModule.forFeature([
      VolumesEffects,
      ZonesEffects,
      DiskOfferingEffects,
      UserAccountEffects,
      SnapshotEffects,
    ]),

import { GithubComponent } from './github/github.component';

@NgModule({
    declarations: [
        GithubComponent
    ],
    imports: [
        CommonModule,
        MatCardModule,
        MatButtonModule,
        MatDividerModule,

        NotaddSharedModule,
        NotaddWidgetModule,

        DynamicModule.withComponents([
            GithubComponent
        ])
    ],
    entryComponents: [
        GithubComponent
    ],
    exports: [
        DynamicModule
    ]
})
export class WidgetsModule {
}

import { ScrollingModule } from '@angular/cdk/scrolling';
import { VirtualTableComponent } from './components/virtual-table.component';

@NgModule({
  declarations: [VirtualTableComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    MatIconModule,
    MatFormFieldModule,
    ScrollingModule,
    DragDropModule,
    MatPaginatorModule,
    MatProgressSpinnerModule,
    LayoutModule,
    DynamicModule.withComponents([]),
  ],
  exports: [VirtualTableComponent],
})
export class NgVirtualTableModule {}