Call function from generic component Angular

Question

I am using Angular 9 and I have a data strcture as follow:
myMap: Map<key: string, value: {component: any, data: string}>

I have 3 elements in my map, the first attribute of my value object is a Component type. I use it to create dynamically new components Like:

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.myMap.get(compName).component);
this.container.clear();
const comp = this.container.createComponent(componentFactory);

Now I want to call the function of the created component. All the components have one function in common (for example foo(string)) but implemented differently in each component. How can I call this function. I tried to do:
(<this.myMap.get(compName).component>comp.instance).foo('abcd');
However I have a compilation error.

An example of my map object:

myMap: Map<key: string, value: {component: any, data: string}> = [
    ['compA', {comp: AComponent, data: 'A'}],
    ['compB', {comp: BComponent, data: 'B'}],
    ['compC', {comp: CComponent, data: 'C'}]
]

The way I thought of doing it was with 3 if else statements like:

if (compName === 'compA') {
    (<compA>comp.instance).foo('abcd');
} else if (compName === 'compB') {
    (<compB>comp.instance).foo('abcd');
} else if (compName === 'compC') {
    (<compC>comp.instance).foo('abcd');
}

But that's really not beautiful, is there another way to do this?

amakhrov · Accepted Answer · 2020-04-03 05:02:22Z

2

Define an interface with your foo function:

interface WithFoo {
  foo: (s: string): void
}

Implement this interface in your components:

@Component()
class CompA implements WithFoo {
  foo(s: string): void {...} 
}

Update myMap with a narrow type for your component:

type MyMap = Map<string, {component: Type<WithFoo>, data: string}>;

Now

this.myMap.get(compName).component has a type of Type<WithFoo>
componentFactory has type ComponentFactory<WithFoo>
comp has type ComponentRef<WithFoo>
and finally comp.instance has type WithFoo - so you can call .foo(data) on it

answered Apr 3, 2020 at 5:02

amakhrov

3,9691 gold badge15 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Call function from generic component Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related