A highly customizable and easy to use modal component for Angular

ng-sq-ui tour: the modal component

Hello and welcome to the first installment of the “ng-sq-ui tour” series where I emphasize the key features of Simple Quality UI for Angular!

Introducing: sq-modal

ng-sq-ui comes with a modal component called sq-modal. It is exported by the NgModalModule . It is also available as a separate npm package: @sq-ui/ng-modal .

Installation

npm install @sq-ui/ng-modal

Or

npm install @sq-ui/ng-sq-ui

Integration

NgModalModuledepends on logic from the NgSqCommonModule (it is listed as a dependency, so it should get installed automatically).

If you have installed the standalone package, you need to import both modules:

import { NgSqCommonModule } from '@sq-ui/ng-sq-common';
import { NgModalModule } from '@sq-ui/ng-modal';

If you have installed the main package, you only need to import the main module:

import { NgSqUiModule } from '@sq-ui/ng-sq-ui';

Then, we need to add the module(s) to the imports array of our app module. If you chose to use the standalone package:

And if you installed the main package:

Usage

Inserting content:

sq-modal is built upon Angular’s content projection mechanism . This gives the author the freedom of specifying the markup, text and styles of the content within the modal. The component uses three attribute selectors to place content:

• sq-modal-title should be added to the container which holds the markup for the modal title
• sq-modal-body denotes the body of the modal
• sq-modal-footer contains the footer markup

A simple example of content projection attributes usage

Toggling the visibility:

There are two ways to programmatically show/hide the modal component. Regardless of the approach you choose, clicking outside the modal will always close it.

1. Using the show two-way data-binding property:

Example 1 (component template): Using the [(show)] prop to toggle modal visibility Example 1 (component TypeScript file): Using the [(show)] prop to toggle modal visibility

2. Using the open() and close() component methods. You should keep in mind that template references are programmatically available after the AfterViewInit lifecycle phase has passed.

Example 2 (component template): Using template reference Example 2 (component TypeScript file): Using template reference

All of the above examples combined gives us this (note: the following StackBlitz examples are best viewed in separate windows):

Adding styles:

The above example shows that the component is entirely bare-bone. That is because the theme any ng-sq-ui component comes with is, by default, disabled .

Neither ng-sq-ui, nor any of its standalone components comes with predefined fonts and/or CSS normalizers. This is left for the author to take care of.

ng-sq-ui component themes generally rely on font-awesome (v4.7.0), so you need to add the font-awesome stylesheet to the build (see angular.json). Finally, you can enable the SQ-UI theme by adding the sq class to a parent element:

Making it *~pop~*:

sq-modal comes with a default modal window animation, provided by animate.css . You can, of course, change the animation to any of your choice, as long as it is implemented using CSS. The property for this configuration is customCssAnimation . It expects an object with the following interface:

The default property values are:

In the following example, a separate animations.scss file has been created. It contains two new animations (again, courtesy of animate.css ), with a new animation duration assigned. “bounceInDown” is used for entrance animation and “bounceOutUp” is used as an exit animation. Then, the following configurational object is assigned to customCssAnimation :

And what we get is: