Creating an Angular material modal that uses a component wrapper and takes a component as a parameter

Question

Creating an Angular material modal that uses a component wrapper and takes a component as a parameter

Currently, I am in the process of developing a dialog service that will showcase a wrapper component whose parameter is a component to be displayed as the content of the wrapper.

open(component: any | TemplateRef<any>, params, viewMode: ViewMode = ViewMode.EDIT, className: string[] = ['as-dialog', 'as-dialog-large']): Observable<any> {

// Need to find a way to nest the component in AsDialogWrapperComponent
// and then display AsDialogWrapperComponent with the nested component as its content
    this.dialogRef = this.matDialog.open(AsDialogWrapperComponent, {
      data: {
        params,
        viewMode
      },
      panelClass: className
    });
    return this.dialogRef.afterClosed();
  }

The code for the wrapper would look like this:

<div class="as-box as-vertical as-fh">
  <div class="as-dialog-header">
    <p class="as-dialog-header-text" mat-dialog-title #title></p>
  </div>
  <mat-dialog-content #content></mat-dialog-content>
</div>

I am interested in finding a way to nest the component provided as a parameter. I have attempted using the componentFactoryResolver, but was unable to resolve it in the end.

This functionality is necessary because some views can be both modals and full-screen views. Therefore, a modal wrapper that accepts a title as a parameter and modal actions either as parameters or within a custom button bar could be utilized.

Any advice or tips on how to achieve this nesting would be greatly appreciated. Thank you.

angular typescript

Answer 1

Answer №1

Consider fetching data for your component from a service instead of passing it through the MAT_DIALOG_DATA injection token. This way, you can use your component as either a full-screen view or a dialog without requiring a wrapper. Remember to include it in the entryComponents list of your module.

Alternatively, here's a possible solution to your query within your wrapper dialog "AsDialogWrapperComponent":

  private createComponent(config: DialogConfig) {
    this.destroyComponent();
    const factory: Component<DialogBase<any>> = this.resolver.resolveComponentFactory(config.component);
    this.componentRef = this.container.createComponent(factory);
    (this.componentRef.instance as DialogBase<any>).data = config.data;
    (this.componentRef.instance as DialogBase<any>).close
      .pipe(take(1))
      .subscribe(this.closeDialog.bind(this));
    this.cdRef.detectChanges();
  }

  private destroyComponent() {
    this.container.clear();
    if (this.componentRef) {
      this.componentRef.destroy();
      this.componentRef = null;
    }
  }

Injecting 'config' in the wrapper dialog:

constructor(@Inject(MAT_DIALOG_DATA) public data: DialogConfig) {}

The structure of 'config':

export interface DialogConfig {
  component: { new(...args: any[]): any; };
  data: any;
}

'DialogBase' can be a superclass that your inner component extends:

import {
  EventEmitter,
  Output
} from '@angular/core';

export class DialogBase<T> {

  @Output() close: EventEmitter<void> = new EventEmitter();

  private _data: T;

  constructor() {
  }

  set data(data: T) {
    this._data = data;
  }

  get data(): T {
    return this._data;
  }
}

'T' represents the expected data interface for your component:

export class EditDialogComponent extends DialogBase<EditDialogData> {

Answer 2

Consider fetching data for your component from a service instead of passing it through the MAT_DIALOG_DATA injection token. This way, you can use your component as either a full-screen view or a dialog without requiring a wrapper. Remember to include it in the entryComponents list of your module.

Alternatively, here's a possible solution to your query within your wrapper dialog "AsDialogWrapperComponent":

  private createComponent(config: DialogConfig) {
    this.destroyComponent();
    const factory: Component<DialogBase<any>> = this.resolver.resolveComponentFactory(config.component);
    this.componentRef = this.container.createComponent(factory);
    (this.componentRef.instance as DialogBase<any>).data = config.data;
    (this.componentRef.instance as DialogBase<any>).close
      .pipe(take(1))
      .subscribe(this.closeDialog.bind(this));
    this.cdRef.detectChanges();
  }

  private destroyComponent() {
    this.container.clear();
    if (this.componentRef) {
      this.componentRef.destroy();
      this.componentRef = null;
    }
  }

Injecting 'config' in the wrapper dialog:

constructor(@Inject(MAT_DIALOG_DATA) public data: DialogConfig) {}

The structure of 'config':

export interface DialogConfig {
  component: { new(...args: any[]): any; };
  data: any;
}

'DialogBase' can be a superclass that your inner component extends:

import {
  EventEmitter,
  Output
} from '@angular/core';

export class DialogBase<T> {

  @Output() close: EventEmitter<void> = new EventEmitter();

  private _data: T;

  constructor() {
  }

  set data(data: T) {
    this._data = data;
  }

  get data(): T {
    return this._data;
  }
}

'T' represents the expected data interface for your component:

export class EditDialogComponent extends DialogBase<EditDialogData> {

Creating an Angular material modal that uses a component wrapper and takes a component as a parameter

Answer №1

Similar questions

Data fetched by Next.js is failing to display on the web page

What causes the Cassandra client driver to provide more detailed information compared to cqlsh?

"Incorporating the node_modules folder into the Express.js compilation process

Ways to verify if the current date exists within a TypeScript date array

The 'posts' binding element is assumed to have a type of 'any' by default

How can we ensure that only one of two props is specified during compilation?

The functionality of TypeScript's instanceof operator may fail when the method argument is not a simple object

Issue with Pagination in Angular 7: Functioning Error

Is ngModel the appropriate method for connecting a form to server-side scripts?

Are there any potential performance implications to passing an anonymous function as a prop?

Ways to "Compile out" log commands

What is the best way to retrieve the outcome from the ngbModal component?

Prevent clicking on cells in the ng-zoro nz-calendar

The reset function in Angular's template-driven form does not seem to be functioning properly when implemented using a component

Encountered an error with ng build --prod while attempting to import a JavaScript file within the app module

When the promise is resolved, the members of the AngularJS controller are now

Tips for choosing a specific quantity and adjusting its value

Leveraging non-ionic-native Cordova plugin

Encountering issues with MatTable functionality in Angular version 10

Having trouble with the Angular router link suddenly "failing"?