Dynamic Child Component in Angular

Question

I am building an app with a consistent design pattern for lists of elements. If I have an object of type A, I create AComponent which accepts a as an input, then create another component to iterate over a list of A's, AListComponent. Then if I have an object B, I need to do the same thing. It seems like I should be able to make an ObjectListComponent passing in the class of the object I want to iterate over, to keep my code DRY.

For example, given

AComponent Controller

...

@Input
a: A;
...

AComponent HTML

<div>{{ a.name }}</div>

AListComponent Controller

...

@Input()
aList: A[];
...

AListComponent HTML

<div *ngFor='let aObj of aList'>
    <app-a [a]='aObj'></app-a>
</div>

How can we abstract the AListComponent to an ObjectListComponent?

ObjectListComponent Controller

...

@Input()
type: any;

@Input()
objects: <type>[]

objectComponent: any;

ngOnInit () {
  this.objectComponent = <get object component from type>
}

ObjectListComponent HTML

<div *ngFor='let obj of objects'>
    <app-objectComponent [object]='obj'></app-objectComponent>
</div>

where the ObjectListComponent would be used as

...

<app-object-list [type]='A' objects='aList'></app-object-list>
...

U need to provide more info. How much diff are the AComponent vs BComponent ? I mean, are they all similar (css, functions) ? what is the purpose of this.objectComponent , how are you planning to use it? If the only diff is the type then create interface ICanvasComponentInput and define type as obj: A | B inside it. use it in ObjectListComponent @Input param. (Try to give more generic name to ObjectListComponent) — Shashank Vivek
– Shashank Vivek, Commented Jan 5, 2020 at 12:25
The idea is that ObjectListComponent should be able to iterate over an arbitrary list of models because the component representing the model is passed in through the type attribute. this.objectComponent would be the component representing the type of objects in the list of objects passed in through the objects attribute. — bicarlsen
– bicarlsen, Commented Jan 5, 2020 at 19:36
I think I got the question little bit. It would be really helpful for me if you can create a demo on stackblitz.com . I'll take it up from there — Shashank Vivek
– Shashank Vivek, Commented Jan 6, 2020 at 5:10
Sorry about that, I haven't used StackBlitz before, so still getting used to it. This should work: stackblitz.com/github/bicarlsen/temp — bicarlsen
– bicarlsen, Commented Jan 8, 2020 at 9:04

Shashank Vivek · Accepted Answer · 2020-01-14 08:07:20Z

2

Thanks for providing a demo code, Take a look at this demo code

The main logic is there in object-list.components.ts

ngAfterViewInit(){
     const component_obj = this.getComponentType(this.objects[0]);
      this.containers.map(
      (vcr: ViewContainerRef, index: number) => {
        const factory = this.resolver.resolveComponentFactory(
          component_obj);
        const componentRef = vcr.createComponent(factory);
        componentRef.instance['data'] = this.objects[index];
        this.cd.detectChanges()
      }
    )
 }

Basically, I have done is:

a.component.html : To handle logic of object interface A
b.component.html : To handle logic of object of type interface B
You can switch between 2 object types in home.component.html

Shows Component A

<app-object-list [objects]='aList'></app-object-list>

Shows Component B

<app-object-list [objects]='bList'></app-object-list>

You can improve the logic to check and determine the type. That part of the code can be improved

edited Jan 14, 2020 at 8:07

answered Jan 9, 2020 at 10:37

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

1 Comment

bicarlsen Over a year ago

I noticed there is a slight error occurring in that one of the elements of the list does not appear.

Collectives™ on Stack Overflow

Dynamic Child Component in Angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related