Monday, October 1, 2018

Semantic UI Angular Modal Tutorials With example | ng2-semantic-ui modal example

In this blog post, We are going to learn Angular Modal Example with Semantic UI Library

Angular Semantic UI modal

Every UI library provides Different UI components. In the same way, Semantic UI provides different UI components including a Modal window.  
Modal is a window or popup which blocks the main page and and display popup view where this view contains content displayed or accepts inputs from user.

Modal can be integrated on any page of the web application. The below code works on Angular 2/4/5/6 versions.

Integration Semantic UI in Angular Application

  • Create Angular APplication using angular CLIL
  • Install ng2-semantic-ui npm package in application
  • Import SUIModule in Angular Application
Details documentation for the above steps can be found in  ng2-semantic-ui integration with Angular Framework.
Once Application is integrated, Write a code for semantic UI modal

Simple modal Example

This example explains about basic modal window with 
  • How to Open Semantic UI modal from a button click
  • Close Modal event using modal.deny() event
On an HTML page, Displayed button, On clicking this button, Open a modal window where user close the window using buttons on the window
<div style="text-align:center">
    Angular Semantic UI Modal With Example
<div style="text-align:center">
<button (click)="show = true">Show Modal</button>
    <sui-modal *ngIf="show" [isClosable]="true" (dismissed)="show = false" #modal>
    <div class="header">Modal Header</div>
    <div class="content">
        <p> This is Test Content</p>
    <div class="actions">
        <button class="ui red button" (click)="modal.deny()">Cancel</button>
        <button class="ui green button" (click)="modal.approve('done')" autofocus>OK</button>
import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {


Output is

semantic UI angular modal example

sui-modal is a page for Modal which contains the following attributes


  • isClosable - True/false values for Displaying close button or not. If not close button, Modal will be closed using ESC key or clicking outside modal 
  • closeResult - size - This defines size of displayed modal - Values are mini, tiny, small, normal and large 
  • isFullScreen - true/false values which show modal in full-screen width or not transition - This is to configure animation effects for displaying modal, Scale is by default. 
  • transitionDuration - time period on which transition effects take place

Modal Events

These events all are called after modal closes and events fired
  • approved - This event called when modal.approve('done') is called
  • denied - This event called when modal.deny() is called
  • dismissed  - This is called after modal closes

Header ,content,footer sections

Each Modal contains below three divs sections
  • Header - Header or title of Modal window
  • Content - Actual content which can be HTML/CSS content 
  • Actions  -  This is a footer of modal window which contains buttons for open/close/custom events.

Related article