standard-angular-popup

Angular Standard Popup

This is a simple Popup implentation for Angular 8. You can add any data in this popup as it accepts data in the section

Configuration

Imports to be done in app module

import { AngularPopupComponent,CustomButtonComponent } from 'standard-angular-popup'

The popup can be called on a page by adding the following code after neccessry imports in the Appmodule

<app-popup [data]="showModal" (close)="onClose()" (confirm)="onConfirm()"></app-popup>

Inputs

The List of Fields in the data object are as follows

id: string; ( Unique Id for the popup)
title: string; 
visible: boolean; ( Popup would show hide based on this )
confirmText: string; ( Text on confirm button)
closeText: string; ()
confirmClass: string;
closeClass: string;
titleClass: string;

Sample Config

showModal = {
  id: "requestinformation",
  title: "REQUEST INFORMATION",
  closeText: "Cancel",
  confirmText: "Submit Request for Information",
  visible: false,
  confirmClass: 'custom-primary',
  closeClass: 'custom-secondary',
  titleClass: 'title'
};

To show popup

this.showModal.visible = true; 

Methods

The popup exposes two methods close and confirm. You can hide the popup in these methods by setting the object visible value to false

  onClose() {
    this.showModal.visible= false;
  }

  onConfirm() {
    this.showModal.visible= false;
  }

Working Example

Demo