Ways to circumvent ng switch and create a component based on type

Question

Ways to circumvent ng switch and create a component based on type

In my current code, I have an array called resourceTypes and I am using ngSwitch to create different components/directives based on the TypeName. However, I find this approach cumbersome as I have to update the code every time I add a new resource editor. How can I refactor the code so that the correct resource-editor is created automatically based on the type without relying on ngSwitch? I have considered using ng-content, but I'm struggling to implement it effectively.

TL;DR: How can I improve the code below to eliminate the need for ngSwitch and dynamically link the type to a component?

 <div *ngFor="let aType of resourceTypes; let i = index" role="tabpanel" class="tab-pane" [ngClass]="{'active': i==0}" [attr.id]="aType.Name">
                <span *ngSwitch="aType.Name">
                    {{aType.Name}} tab content here
                    <config-resource-editor [application]="application" ngSwitchWhen="Config" template></config-resource-editor>
                    <mvc-resource-editor [application]="application" ngSwitchWhen="MVC" template></mvc-resource-editor>
                    <other-resource-editor [application]="application" ngSwitchWhen="Other" template></other-resource-editor>
                    <wcf-resource-editor [application]="application" ngSwitchWhen="WCF" template></wcf-resource-editor>
                    <web-resource-editor [application]="application" ngSwitchWhen="Web" template></web-resource-editor>
                    <webapi-resource-editor [application]="application" ngSwitchWhen="WebAPI" template></webapi-resource-editor>
                </span>
            </div>

javascript angular typescript

Answer 1

Answer №1

If you want to eliminate the switch case, consider creating a wrapper component and utilizing @ViewChild.

Here is an example of how your wrapper could look:

@Component({
    selector: 'my-wrapper',
    template: `<div #target></div>`
})
export class MyWrapper {
    @ViewChild('target', {read: ViewContainerRef}) target;
    cmpRef: ComponentRef<Component>;
    currentComponent: Component;
    private isViewInitialized: boolean = false;
    constructor(
            private componentFactoryResolver: ComponentFactoryResolver,
            private cdRef: ChangeDetectorRef,
            private wrapperService: WrapperService
    ){}

    updateComponent() {
        if (!this.currentComponent) {
            return;
        }
        if (!this.isViewInitialized) {
            return;
        }
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
        let factory = this.componentFactoryResolver.resolveComponentFactory(this.currentComponent);
        this.cmpRef = this.target.createComponent(factory);
    }

    ngAfterViewInit() {
        this.cdRef.detectChanges();
        this.isViewInitialized = true;
        this.currentComponentSubscription = this.wrapperService.getCurrentComponent().subscribe(c => {
            this.currentComponent = c;
            if (c) {
                this.updateComponent();
            }
        });
    }

    ngOnDestroy() {
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
        if(this.currentComponentSubscription){
           this.currentComponentSubscription.unsubscribe()
        }
    }
}

Create a WrapperService with a getter/setter for the current component where the getter returns a BehaviorSubject:

private _currentComponent: BehaviorSubject<Component> = new BehaviorSubject(null);
getCurrentComponent(): BehaviorSubject<Component> {
    return this._currentComponent;
}

setCurrentComponent(value: Component) {
   this._currentComponent.next(value);
}

Replace the ngSwitch in your parent component with the selector for the MyWrapper component and set the current component using the wrapper service.

Don't forget to add the components being attached/detached as entryComponents in the @NgModule:

@NgModule({
    entryComponents: <array of components>
})

Note: When setting the _currentComponent, provide the reference to the component rather than just a string.

Credits: Inspired by @Gunter's example. Thank you for the guidance!

Answer 2

If you want to eliminate the switch case, consider creating a wrapper component and utilizing @ViewChild.

Here is an example of how your wrapper could look:

@Component({
    selector: 'my-wrapper',
    template: `<div #target></div>`
})
export class MyWrapper {
    @ViewChild('target', {read: ViewContainerRef}) target;
    cmpRef: ComponentRef<Component>;
    currentComponent: Component;
    private isViewInitialized: boolean = false;
    constructor(
            private componentFactoryResolver: ComponentFactoryResolver,
            private cdRef: ChangeDetectorRef,
            private wrapperService: WrapperService
    ){}

    updateComponent() {
        if (!this.currentComponent) {
            return;
        }
        if (!this.isViewInitialized) {
            return;
        }
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
        let factory = this.componentFactoryResolver.resolveComponentFactory(this.currentComponent);
        this.cmpRef = this.target.createComponent(factory);
    }

    ngAfterViewInit() {
        this.cdRef.detectChanges();
        this.isViewInitialized = true;
        this.currentComponentSubscription = this.wrapperService.getCurrentComponent().subscribe(c => {
            this.currentComponent = c;
            if (c) {
                this.updateComponent();
            }
        });
    }

    ngOnDestroy() {
        if (this.cmpRef) {
            this.cmpRef.destroy();
        }
        if(this.currentComponentSubscription){
           this.currentComponentSubscription.unsubscribe()
        }
    }
}

Create a WrapperService with a getter/setter for the current component where the getter returns a BehaviorSubject:

private _currentComponent: BehaviorSubject<Component> = new BehaviorSubject(null);
getCurrentComponent(): BehaviorSubject<Component> {
    return this._currentComponent;
}

setCurrentComponent(value: Component) {
   this._currentComponent.next(value);
}

Replace the ngSwitch in your parent component with the selector for the MyWrapper component and set the current component using the wrapper service.

Don't forget to add the components being attached/detached as entryComponents in the @NgModule:

@NgModule({
    entryComponents: <array of components>
})

Note: When setting the _currentComponent, provide the reference to the component rather than just a string.

Credits: Inspired by @Gunter's example. Thank you for the guidance!

Ways to circumvent ng switch and create a component based on type

Answer №1

Similar questions

Guide to implementing optional localization strings in React-Router paths

The behavior of Angular 4 CSS and JS changes upon refreshing the page

Is Your Website Sluggish because of an Excessive Amount of JavaScript on Page

Get the name of the array using JavaScript

Verify the presence of a JSON object within the session storage using JavaScript

Using `reduce` in TypeScript, you can organize an array of objects based on a shared property

Activate a button utilizing jQuery keyboard functionality

When the mouse button is released or when an event listener is

The headers are correct, however Chrome is displaying the message "Resource interpreted as Document."

What could be causing this program to continuously add values to the message table whenever the page is refreshed?

I have noticed that when I close the Material-UI dialog, it prevents me from interacting with my

Comparison of various approaches for invoking JavaScript/jQuery functions

[server-auth]: The `useSession` function is required to be enclosed within a <SessionProvider /> component to avoid the error occurring in the current JavaScript file

Angular - How to fix the issue of Async pipe not updating the View after AfterViewInit emits a new value

Aggregate information from an array containing multiple nested arrays

Tips for retrieving the parameter value from a Javascript regular expression

Exploring the possibilities of utilizing React server components in my project

What is preventing the dependency injection of AuthHttp (angular2-jwt) into a component?

"Sending a POST request from the smartphone application client developed using the Meteor

Ways to incorporate an external JavaScript file into Angular and execute it within an Angular application