Transform a string into a class in Typescript/Angular

Question

Transform a string into a class in Typescript/Angular

In my application, I've created a reusable modal popup component that takes a string as input and dynamically loads other components based on that input. This approach allows me to use the same modal popup component for multiple modals in the app instead of writing separate code for each one. However, I have encountered an issue where I'm using a large if/else statement to determine which component to load based on the string input:

if (this.data.component == "ContactStaffComponent")
  componentFactory = this.componentFactoryResolver.resolveComponentFactory(ContactStaffComponent);
else if (this.data.component == "DocketComponent")
  componentFactory = this.componentFactoryResolver.resolveComponentFactory(DocketComponent);
else if (this.data.component == "FilingComponent")
  componentFactory = this.componentFactoryResolver.resolveComponentFactory(FilingComponent);
else if (this.data.component == "ServiceListRecordComponent")
  componentFactory = this.componentFactoryResolver.resolveComponentFactory(ServiceListRecordComponent);
else { }

I am wondering if there is a way to convert the string into a type, similar to .NET reflection?

angular typescript angular7

Answer 1

Answer №1

One way to streamline your code is by creating an object containing your components:

private modals = {
    ContactStaffComponent: ContactStaffComponent,
    DocketComponent: DocketComponent
};

Then, depending on the input string, retrieve the corresponding component and pass it to the component resolver:

let component = this.modals[this.data.component];
componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);

This approach helps simplify your codebase by avoiding a large if/else block. Hopefully, you find this tip useful!

Answer 2

One way to streamline your code is by creating an object containing your components:

private modals = {
    ContactStaffComponent: ContactStaffComponent,
    DocketComponent: DocketComponent
};

Then, depending on the input string, retrieve the corresponding component and pass it to the component resolver:

let component = this.modals[this.data.component];
componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);

This approach helps simplify your codebase by avoiding a large if/else block. Hopefully, you find this tip useful!

Answer 3

Answer №2

If you want to streamline the code, you can define an Observable containing a list of Components like this:

import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

...

export class ... {
  componentList$ = of(
    ContactStaffComponent,
    DocketComponent,
    FilingComponent,
    ServiceListRecordComponent
  );
  ...
}

To extract the component name, access the .name attribute from componentList$. You can then filter the componentList$ as demonstrated below.

this.componentList$.pipe(
  filter(component => this.data.component == component.name.toString()))
  .subscribe((componentName: any) =>{
    componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentName);
  });

I trust this information is helpful. See you later!

Answer 4

If you want to streamline the code, you can define an Observable containing a list of Components like this:

import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

...

export class ... {
  componentList$ = of(
    ContactStaffComponent,
    DocketComponent,
    FilingComponent,
    ServiceListRecordComponent
  );
  ...
}

To extract the component name, access the .name attribute from componentList$. You can then filter the componentList$ as demonstrated below.

this.componentList$.pipe(
  filter(component => this.data.component == component.name.toString()))
  .subscribe((componentName: any) =>{
    componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentName);
  });

I trust this information is helpful. See you later!

Transform a string into a class in Typescript/Angular

Answer №1

Answer №2

Similar questions

"Exploring the methods to retrieve Firebase authentication error details and outputting the console log message along with

Display a pop-up directly below the specific row in the table

Display the ion-button if the *ngIf condition is not present

How come my uploaded Excel Javascript add-on opens in an external browser instead of the task pane?

Passing values in onPress method of TouchableOpacity without using arrow functions or bind function can be achieved by using JSX props. Remember not to use arrow functions in JSX props

Run a function after all xmlHttpRequests have finished executing

Troubleshooting problem with Angular Click Outside Directive and unexpected extra click event issue

Developing interconnected dynamic components in Angular

Is it possible to combine TypeScript modules into a single JavaScript file?

The sequence of operations when assigning in Typescript with || and utilizing the array .find method

Utilizing the MapToIterable Angular Pipe with TypeScript

Create a combined string from a structure resembling a tree

Ionic 3: Struggling to Access Promise Value Outside Function

Implementing Routes in Express Using Typescript Classes

Extend the express request object with Typescript and then export the modified object

The issue arises when trying to use data provided by a service, resulting in an "undefined

Parent component not receiving value from NG_VALUE_ACCESSOR for radio button selections

What is the correct way to utilize refetchOnReconnect for a builder.mutation endpoint in @redux/toolkit/query?

Has the Angular 2 community established a standardized ecosystem?

I am encountering an issue with an undefined variable called "stripe" in my Angular project, despite the fact