Show/Hide Dialog Or Modal Service In Angular

Introduction

 

In this article we will see how to create a modal window or dialog box in Angular. We will use Angular and typescript to show or hide the modal window.

 

We will be using NgbModal in order to open the modal. This is just required to create a component and pass the template in its open method.

 

This also have a Dismiss method for closing the modal with the particular reason.

 

Let’s start creating the application with the dialog service provided on a specified event.

 

We will modify the existing application to add the Dialog functionality.

 

Click here to Create the application that is required further in this demonstration.

 

Where to apply the modal dialog?

1. We will try to show the dialog if User is clicking on “Register” button without filling the fields.
2. We will try to show the dialog if the User that you are trying to register is already present.
3. We will show dialog if the user is successfully created.

We will be using RXJS Subject in order to achieve the dialog service. Subject is a special type of observable that allow values to multicast to many observers.

 

Create a modal.service.ts in _services directory and add the below content:

import { Injectable } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Injectable({
  providedIn: 'root'
})
export class ModalService {
    closeResult = '';

    constructor(private modalService: NgbModal){}

    open(content) {
        return this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'})
        .result.then((result) => {
        return this.closeResult = `Closed with: ${result}`;
      }, (reason) => {
        return this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      });
    }

    private getDismissReason(reason: any): string {
      if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
      } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
      } else {
        return `with: ${reason}`;
      }
    }
}

Create dialog.service.ts in _services directory and add the below contents:

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DialogService {
    private dialogSubject = new Subject<any>();

    sendDialog(dialog: {type: number, message: string}) {
        this.dialogSubject.next(dialog);
    }

    clearDialog() {
        this.dialogSubject.next();
    }

    getDialog(): Observable<any> {
        return this.dialogSubject.asObservable();
    }
}

Create page.service.ts in _services and add below contents:
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class PageService {
    private pageSubject = new Subject<any>();

    sendPage(dialog: {type: number, message: string}) {
        this.pageSubject.next(dialog);
    }

    clearPage() {
        this.pageSubject.next();
    }

    getPage(): Observable<any> {
        return this.pageSubject.asObservable();
    }
}

Let’s create a component that will have the templates for opening the dialog content.

 

Create _component directory in app directory.

 

Create component prompt inside _component directory.

 

Open prompt.component.ts

import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { ModalService } from 'src/app/_services/modal.service';
import { DialogService } from 'src/app/_services/dialog.service';
import { Subscription } from 'rxjs';
import { PageService } from 'src/app/_services/page.service';

@Component({
  selector: 'app-prompt',
  templateUrl: './prompt.component.html',
  styleUrls: ['./prompt.component.css']
})
export class PromptComponent implements OnInit {
  @Input() result: number;
  subscription: Subscription;
  @ViewChild('dialog_required') dialog_required: ElementRef;
  @ViewChild('dialog_serverError') dialog_serverError: ElementRef;
  @ViewChild('dialog_success') dialog_success: ElementRef;

  closeResult = '';
  serverError = '';
  serverResponse = '';

  constructor(private modalService: ModalService, private dialogService: DialogService, private pageService: PageService) {
    this.result = 0;
    this.subscription = this.dialogService.getDialog().subscribe(dialog => {
      if (dialog) {
        this.open(dialog);
      }
    });
  }

  open(dialogType) {
    switch(dialogType.type)
    {
        case 1:
          this.modalService.open(this.dialog_required).then(data=>{
            this.closeResult = data;
          });
           break;
        case 2:
          this.serverError = dialogType.message;
          this.modalService.open(this.dialog_serverError).then(data=>{
            this.closeResult = data;
          });
          break;
        case 3:
          this.serverResponse = dialogType.message;
          this.modalService.open(this.dialog_success).then(data=>{
            this.closeResult = data;
            this.pageService.sendPage({type: 1, message: "page"})
          });
          break;
        default:
          console.log('no modal opens');
    }
  }

  ngOnInit(): void {
    console.log(this.result)
  }

  ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }
}

Open prompt.comonent.html and add the below contents:

<ng-template #dialog_required let-modal>
  <div class="card-header" style="background-color:cyan;">
    <h4>
      Error
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">×</span>
    </button>
    </h4>
  </div>
  <div class="modal-body" style="background-color:lightsteelblue">
    <label>Required fields must be filled!</label>
  </div>
</ng-template>

  <ng-template #dialog_serverError let-modal>
    <div class="card-header" style="background-color:cyan;">
      <h4>
        Error
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">×</span>
      </button>
      </h4>
    </div>
    <div class="modal-body" style="background-color:lightsteelblue">
      <label>{{serverError}}</label>
    </div>
  </ng-template>

  <ng-template #dialog_success let-modal>
    <div class="modal-header" style="background-color:cyan;">
      <h4 class="modal-title" id="modal-basic-title">Success</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">×</span>
      </button>
    </div>

    <div class="modal-body" style="background-color:lightsteelblue">
      <form>
        <div class="form-group">
          <label for="serverResponse">{{serverResponse}}</label>
        </div>
      </form>
    </div>

    <div class="modal-footer" style="background-color:lightsteelblue">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
    </div>
  </ng-template>

Open Register.component.ts and add the below contents:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../_services/auth.service';
import { User } from '../_model/user';
import { Router } from '@angular/router';
import { DialogService } from '../_services/dialog.service';
import { Subscription } from 'rxjs';
import { PageService } from '../_services/page.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit  {

  component: any;
  subscription: Subscription;
  registerResult: number = 0;
  registerUserData = new User();
  constructor(private _authservice: AuthService, private router: Router, private dialogService: DialogService,private pageService: PageService) {
    // redirect to home if already logged in
      if (this._authservice.currentUserValue) {
        this.router.navigate(['/paidevents']);
    }

    this.subscription = this.pageService.getPage().subscribe(page => {
      if (page) {
        this.open(page);
      } else {
        // do something
      }
    });
  }

  ngOnInit(): void {
    this.registerUserData.username
      = this.registerUserData.firstName
      = this.registerUserData.lastName
      = this.registerUserData.password
      = ""
  }

  ValidateUser(user){
    if(!user.username || !user.firstName || !user.lastName || !user.password) return false;
    return true;
  }
  Register(user){
    if(!this.ValidateUser(user)) {
      this.dialogService.sendDialog({type:1, message: "Required Fields must be filled.."});
      return;
    }
    console.log(user);
    this._authservice.registerUser(user).subscribe(data=>
      {
        console.log("login Details:", data);
        this.dialogService.sendDialog({type: 3, message: data});
      },
      error => {
        console.log("Error: ", error);
        this.dialogService.sendDialog({type: 2, message: error});
      },
      ()=>{
        console.log("login process complete!");
      });
    console.log('Logged in!');
  }

 open(page){
   switch(page.type)
   {
     case 1:
      this.router.navigate(['/login'], { queryParams: { }});
      break;
      default:
        console.log('some data here..');
   }
 }
}

Open register.component.html and add the below selector at the end.

 

<app-prompt></app-prompt>

 

Run the application,

 

 

 

Click on Register button.

 

 

You will get the dialog with error message. Click on close icon.

 

Let’s register a user with proper details. Click on Register button.

 

 

On Successful registration of User you will get the prompt.

 

Let’s create a user that is already registered.

 

 

You will get an error indicating the already taken username message.

 

How it works,

1. Click on Register button.
2. If fields are blank then it will sendDialog with type 1, message: “Required Fields must be filled..”.
3. From dialog service the prompt component will receive the value of sendDialog and open the dialog accordingly.

1. On successful creation of User it will prompt the success dialog.
2. On clicking on Ok of dialog it will send the page with type and message through pageService.
3. On Registering component the pageService is subscribed and on the next immediate page value it will try to open the page based on parameter passed.
4. In simple terms, on successful creation of User it will show you a success prompt and when clicking on Ok button it will redirect to the Login Page.
5. This is all possible because of Subject we have used in subscription and on the every new page or dialog value it will notify or emit the event to the subscribed observer and make these things possible.

Thank you.