{

Angular Semantic UI Popup Modal | ng2-semantic-ui modal example


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.

A modal is a window or popup which blocks the main page and displays a popup view where this view contains content displayed or accepts inputs from the user.

Modal integrates 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 the ng2-semantic-ui npm package in the application.
  • Import SUIModule in Angular Application

Details documentation for the above steps found in ng2-semantic-ui integration with Angular Framework.

Once the Application is integrated, Write a code for the semantic UI modal.

Semantic UI 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 a button, On clicking this button, Open a modal window, where the user closes the window using buttons on the window.

app.component.html:

<div style="text-align:center">
   <h1>
    Angular Semantic UI Modal With Example
</h1>
</div>
<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>
    <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>
    </div>
</sui-modal>
</div>

app.component.ts:

import { Component } from '@angular/core';

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

}

Output:

semantic UI angular modal example

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

Semantic UI modal Properties

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

Angular Semantic Modal Events

These events call after the modal closes and events are fired.

  • approved: This event called when modal.approve(‘done’) is called
  • denied: This event called when modal.deny() is called
  • dismissed This calls after the modal closes

Header ,content,footer sections

Each Modal contains 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 a modal window that contains buttons for open/close/custom events.

Conclusion

In this tutorial, You learned the Semantic UI modal in Angular with properties events and different sections such as header content and footer section.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

Angular LocalStorage, SessionStorage example | Ngx-webstorage tutorial

How to find the length of enum data in typescript

D3 Integration with Angular 13 Tutorial|Line Charts Example

How to generate GUID in Angular 13| Typescript UUID example

Angular 13 Sweetalert tutorial|popup notification in Angular example

Angular 13 Lowercase pipe tutorial | How to Convert a string to small case example

Angular 13 Titlecase pipe tutorial | How to Capitalize the first letter of each word of a string example