3

I have 3 modules with a component in each:

tasks
  >tasks
    -tasks.component.ts|html|css
  -tasks.module.ts

people
  >people
    -people.component.ts|html|css
  -people.module.ts

dynamic-container
  >dynamic-container
    -dynamic-container.component.ts|html|css
  -dynamic-container.module.ts

and I'm using ng-dynamic-component package to set tasks, people and in future some other components dynamically to DynamicContainerComponent.

dynamic-container.html

<div *ngFor="let dynComponent of dynComponents()">
   <ndc-dynamic [ndcDynamicComponent]="dynComponent.component">
   </ndc-dynamic>
</div>

array dynComponents looks like this:

public dynComponents: ITabComponent[] = [
   { name: 'Tasks', icon: 'tasks', component: TasksComponent },
   { name: 'People', icon: 'people', component: PeopleComponent }
];

Now this already creates dependency to TasksModule and PeopleModule, but in addition DynamicContainerModule looks like this

@NgModule({
  declarations: [DynamicContainerComponent],
  imports: [
    CommonModule,
    TasksModule,
    PeopleModule,
    DynamicModule.withComponents([TasksComponent, PeopleComponent])
  ],
  exports: [DynamicContainerComponent]
})
export class DynamicContainerModule { }

So how can I remove those dependencies and make DynamicContainerComponent truly dynamic? I guess I could create additional module which is application specific and which returns the dynComponents array (i don't know how to do even this correctly), but the DynamicModule.withComponents part is even more tricky.

char m
  • 7,840
  • 14
  • 68
  • 117

1 Answers1

1

You can use dynamic component loader instead of ng-dynamic-components.

And you can load the component and remove the component based on conditions.dynamically loading a component.(example is kept on set timeout, but you can call the function on the condition from a service or backend as you like.)

In the solution here You can find how to remove a component dynamically.

Sridhar Natuva
  • 211
  • 1
  • 4
  • 16
  • thanks, but i'm asking a solution to a specific issue – char m Sep 05 '19 at 19:53
  • i don't know if it was possible or not the way i tried to do it, but dynamic component loader works. it's not simple though. thanks! – char m Oct 24 '19 at 09:42