Issue with Dynamic Component Loading in Angular 4

Question

I have a dialoganchor as Directive as below

@Directive({
  selector: '[dialogAnchor]'
})
export class DialogAnchorDirective {
    constructor(
        private viewContainer: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver
    ) {}

    createDialog(dialogComponent: { new(): DialogComponent }): ComponentRef<DialogComponent> {
        this.viewContainer.clear();

        const dialogComponentFactory =
          this.componentFactoryResolver.resolveComponentFactory(dialogComponent);
        const dialogComponentRef = this.viewContainer.createComponent(dialogComponentFactory);

        dialogComponentRef.instance.close.subscribe(() => {
            dialogComponentRef.destroy();
        });
        // setTimeout( () => {
        //   dialogComponentRef.destroy();
        // }, 5000);
        return dialogComponentRef;
    }
}

by using this i am loading DialogComponent Dynamically i am calling above dialog Anchor in my application components as follows

this.dialogAnchor.createDialog(DialogComponent);

but in above line showing error as [ts] Argument of type 'typeof DialogComponent' is not assignable to parameter of type 'new () => DialogComponent'.

DialogComponent code is below

import {Component, EventEmitter, Input, OnInit} from '@angular/core';
import { AppService } from './app.service';

@Component({
    selector: 'dlg',
    template: `
    <div class="dialog" [ngClass]="{'stu-success':dlgProps.msgType == 'success','stu-error':dlgProps.msgType == 'fail',
    'stu-warn':dlgProps.msgType == 'warn','stu-info':dlgProps.msgType == 'info'}" >
        <header><div class="title">Dialog box</div><div class="exit-button" (click)="onClickedExit()">x</div></header>
        <p>Hi XXXXXXXX</p>
    </div>
    `,
    styles: [`
        .dialog {
            width: 250px;
            position: absolute;
            border: 1px solid black;
            border-radius: 5px;
            overflow: hidden;
            position: fixed;
            left: calc(50% - 125px);
            top: 100px;
        }
        .dialog p {
            text-align: center;
        }
        .dialog header {
            border-bottom: 1px solid black;
            font-size: 12px;
            padding: 5px;
            display: flex;
        }
        .dialog header .title {
            flex-grow: 1;
            cursor: default;
        }
        .dialog header .exit-button {
            cursor: pointer;
            padding: 0 5px;
        }
        .stu-success {
          background: green;
        }
        .stu-error {
          background: #ff0000;
        }
        .stu-warn{
          background: orange;
        }
        .stu-info {
          background: yellow;
        }
    `]
})
export class DialogComponent implements OnInit {
    dlgProps: any;
    constructor(private appService: AppService) {
    }
    close = new EventEmitter();

    ngOnInit() {
      this.dlgProps = this.appService.dlgProps;
    }

    onClickedExit() {
        this.close.emit('event');
    }
}

Why are you defining dialogComponent as {new(): DialogComponent}? — Oscar Paz
– Oscar Paz, Commented Mar 21, 2018 at 10:38
passing it as a JSON Object, it means creating new DialogComponent — Santhosh
– Santhosh, Commented Mar 21, 2018 at 10:44

Oscar Paz · Accepted Answer · 2018-03-21 11:00:28Z

1

When you define dialogComponent as new(): DialogComponent you're saying: 'give me a class of type DialogComponent that has a parameterless constructor`.

As you see, it's not the case because DialogComponent has a constructor with parameters.

So, either you define createDialog as:

createDialog(dialogComponent: { new(AppService): DialogComponent }): ComponentRef<DialogComponent>

Or you just do this:

createDialog(dialogComponent: Type<DialogComponent>): ComponentRef<DialogComponent>

which in my opinion is far easier. This way you can create dialogs even for derived classes of DialogComponent, regardless of the number of parameters.

If you use the second approach be sure to import Type from @angular/core.

edited Mar 21, 2018 at 11:00

answered Mar 21, 2018 at 10:50

Oscar Paz

18.3k3 gold badges30 silver badges43 bronze badges

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

2 Comments

Santhosh Over a year ago

Thank you very much Mr.Oscar Paz, will work and give update shortly

Santhosh Over a year ago

@OOOOOOOOOOscar Paz, It is working fine . 999999999999999999999999999999999999999999999999999999999999 times thank you

Collectives™ on Stack Overflow

Issue with Dynamic Component Loading in Angular 4

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related