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

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

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.