How to use DynamicModule.withComponents of ng-dynamic-component without creating dependency for those components?

Question

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.

I know, it's been a long time, but have you found a solution? — PilgrimViis
– PilgrimViis, Commented Dec 7, 2021 at 6:54

Sridhar Natuva · Accepted Answer · 2019-09-05 17:04:21Z

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.

answered Sep 5, 2019 at 17:04

Sridhar Natuva

2111 gold badge6 silver badges17 bronze badges

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

2 Comments

char m Over a year ago

thanks, but i'm asking a solution to a specific issue

char m Over a year ago

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!

Collectives™ on Stack Overflow

How to use DynamicModule.withComponents of ng-dynamic-component without creating dependency for those components?

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related