How to pass component name as argument and receive it in function

Question

I need to pass a component name as argument to a function and receive it and use it. But only string is received. Below is the code

(click)="this.myapp.openModal('AddContactModelComponent','xl')"

I am receiving it here to use as component

 openModal(component:any,size:string) {
    // const modalRef = this.modalService.open(ModalComponent);
    const modalRef = this.modalService.open(
      component,
      {
       size: size, 
      });
      this.modal_title ='test';
  }

Philipp Meissner · Accepted Answer · 2021-01-05 06:18:04Z

1

You are passing in a string as the component argument ('AddContactModelComponent' in your example).

You will most likely need a mapper that openModal can use like so

openModal(componentName: string, size: string) {
  const mapper = {
    'AddContactModelComponent': AddContactModelComponent,
    'AnotherString': AnotherComponent,
  };

  const modalRef = this.modalService.open(
    mapper[componentName],
    {
      size: size,
    });
}

Then you can call it as desired in your template

(click)="this.myapp.openModal('AddContactModelComponent','xl')"

answered Jan 5, 2021 at 6:18

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

How to pass component name as argument and receive it in function

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related