The modal popup will be triggered by various button clicks, each displaying slightly different data within the popup

Question

The modal popup will be triggered by various button clicks, each displaying slightly different data within the popup

As a newcomer to Angular 4, I have encountered an interesting challenge. Currently, my code consists of two separate components for two different modals triggered by two different button clicks (Add User and Edit User). However, I now face the requirement of creating a single modal popup that can be used for both scenarios (clicking 'Add User' or 'Edit User'). The fields in both modals are identical, with the only difference being that the Edit User modal is pre-populated with user data while the Add User modal displays empty fields. Any assistance on how to achieve this would be greatly appreciated. :)

angular typescript modal-dialog

Answer 1

Answer №1

Check out this example on StackBlitz that demonstrates how to use the Angular Material Dialog Component to show different modals based on the button clicked.
The key concept here is to pass data to the modal and customize its content accordingly.
In this instance, a simple string - either add or edit - is passed.

Main Component

import { Component, Inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';

@Component({
    selector: 'my-app',
    template: `
    <button (click)="openDialog('add')">add</button>
    <button (click)="openDialog('edit')">edit</button>
  `
})
export class AppComponent {
    constructor(public dialog: MatDialog) { }

    openDialog(action) {
        this.dialog.open(DialogComponent, {
            data: action
        });
    }
}

Modal Component

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
    template: `
    <h4>action = {{action}}</h4>
    <p *ngIf="action === 'add'">add content displayed</p>
    <p *ngIf="action === 'edit'">edit content displayed</p>
  `,
})
export class DialogComponent {
    constructor(@Inject(MAT_DIALOG_DATA) public action: string) { }
}

Answer 2

Check out this example on StackBlitz that demonstrates how to use the Angular Material Dialog Component to show different modals based on the button clicked.
The key concept here is to pass data to the modal and customize its content accordingly.
In this instance, a simple string - either add or edit - is passed.

Main Component

import { Component, Inject } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';

@Component({
    selector: 'my-app',
    template: `
    <button (click)="openDialog('add')">add</button>
    <button (click)="openDialog('edit')">edit</button>
  `
})
export class AppComponent {
    constructor(public dialog: MatDialog) { }

    openDialog(action) {
        this.dialog.open(DialogComponent, {
            data: action
        });
    }
}

Modal Component

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
    template: `
    <h4>action = {{action}}</h4>
    <p *ngIf="action === 'add'">add content displayed</p>
    <p *ngIf="action === 'edit'">edit content displayed</p>
  `,
})
export class DialogComponent {
    constructor(@Inject(MAT_DIALOG_DATA) public action: string) { }
}

The modal popup will be triggered by various button clicks, each displaying slightly different data within the popup

Answer №1

Main Component

Modal Component

Similar questions

Tips for dynamically implementing a pipe in Angular 5

Steps for displaying a 404 page on a server-side rendered dynamic route following a client-side page transition

Global Inertia Headers

A specialized <T> interface, now enhanced with additional functionalities

Can TypeScript Implement a Dictionary Feature Similar to C#?

Tips for creating a dynamic interface in TypeScript to eliminate repetitive code

Type of JavaScript map object

Factory function in Angular for translating using arrow syntax

Troubleshooting Angular: Issues with Table Data Display and Source Map Error

Exploring Angular: How to Access HTTP Headers and Form Data from POST Request

Leveraging getStaticProps in Next.js

Anticipating the completion of post requests

Is there a way to deactivate a tab when it's active and reactivate it upon clicking another tab in Angular?

Extending momentjs functionality with a custom method in Typescript

Retrieve the part of a displayed element

Enhancing NG Style in Angular 6 using a custom function

Using Angular's async, you can retrieve a value returned by a promise

Iterate and combine a list of HTTP observables using Typescript

Is there a method to automatically eliminate all unnecessary properties in an Angular project?

The error message for Angular FormControl's minimum length validation is not showing up in the errors