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

score 0 · Accepted Answer · answered Aug 09 '21 at 14:18

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.

One more thing I would like to ask. I understood the code, But in each modal I have to add different content then what should I do? Like in login modal, I have to add login textfield only, in register modal I have to add "Name" "ID" "Password" etc. So what will I have to do? — , Aug 10 '21 at 14:27

Mazdak · Answer 2 · 2021-08-10T08:13:35.223

0

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

edited Aug 10 '21 at 08:13

answered Aug 09 '21 at 15:35

Mazdak

650
5
13

Hello @Mazdak, The stackblitz link you provided redirects to its direct output. Could you please share your code as well? – Aug 10 '21 at 07:46
sure. URL changed. @Chinmay – Mazdak Aug 10 '21 at 08:14
Yes, this solution works as well. Thank you! – Aug 10 '21 at 14:28

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

2 Answers2