How do I create different modals for different users in Angular?

Question

I am trying to create an application in which I have multiple user's data. I have to create 6 modals for each user from where they can access their data. Suppose User 1 has 6 modals named - A B C D E F , then

on click of A, login modal should open.

on click of B, register modal should open

and all these modals are different for all users.

I tried creating different methods for users, but that is not going to work. Because I will have to create 6 methods for all users and same with modals. So for 1 user, I will have to create 6 modals and again for 2nd user another 6 modals and so on.

Is there a better way for this?

I have created a StackBlitz to show what I have done

Answer 1

you can try something like below.

app.component.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  displayModal = 'none';

  users = [
    {
      id: 'user1',
      name: 'User 1'
    },
    {
      id: 'user2',
      name: 'User 2'
    },
    {
      id: 'user3',
      name: 'User 3'
    },
    {
      id: 'user4',
      name: 'User 4'
    },
    {
      id: 'user5',
      name: 'User 5'
    },
    {
      id: 'user6',
      name: 'User 6'
    }
  ];

  modals = [
    {
      label: 'A',
      type: 'login'
    },
    {
      label: 'B',
      type: 'register'
    },
    {
      label: 'C',
      type: 'reset password'
    },
    {
      label: 'D',
      type: 'Forgot Password'
    },
    {
      label: 'E',
      type: 'Confirmation'
    },
    {
      label: 'F',
      type: 'Delete'
    }
  ];

  modalsForEachUser = 6;
  selectedUser;
  selectedModal;

  openModal(user, modal) {
    console.log(user);
    this.selectedUser = user;
    this.selectedModal = modal;
    this.displayModal = 'block';
  }

  onCloseHandled() {
    this.displayModal = 'none';
  }
}

app.component.html

<table>
  <tr *ngFor="let user of users">
    <td class="actions text-left">
      {{ user.name }}
    </td>
    <a *ngFor="let modal of modals" (click)="openModal(user, modal.type)" class="abcd">
      {{ modal.label }}
    </a>
  </tr>
</table>

<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display': displayModal}" *ngIf="selectedUser">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ selectedUser.name }} {{ selectedModal }}</h4>
        <button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">&times;</span></button>
      </div>
      <form id="login" method="post" autocomplete="off">
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row m-b-20">
              <div class="col-md-4">
                <label class="deposite-user-first">{{ selectedUser.name }}</label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">

          <button type="button" class="btn btn-back" data-dismiss="modal" (click)="onCloseHandled()"><i class="fas fa-undo"></i>Back</button>
          <button type="submit" class="btn btn-submit">submit<i class="fas fa-sign-in-alt"></i></button>
        </div>
      </form>
    </div>
  </div>
</div>

you can check working demo here.

Let me know if you have any doubts.

Answer 2

As I understood you should create components for your actions like 'login' and 'register', sure they have their own businesses like APIs to call or validations.

Then you can pass parameters like username to these components. also, you can put modal functionality in those components or keep it up to the root component.

Generally what you do is not a good practice, consider redesigning the way you go to each form.

a sample code is provided: stackblitz