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-modalOr
npm install @sq-ui/ng-sq-uiIntegration
NgModalModule depends 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
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.
- Using the
showtwo-way data-binding property:
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.
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:
Developers usually have a specific styleguide and/or designs they need to implement. That is also the reason why ng-sq-ui components come with disabled themes. This makes styling the component a lot easier, avoiding all the potential CSS rule overriding and struggle with !important statements. Below is an example with custom styles for the modal component:
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:
This marks the end of the first piece of the “ng-sq-ui tour” series. Did you enjoy this article? If so, then please show support by starring our repo. Stay tuned for more!
