ems-web-app-modal
Advanced tools
Readme
The Modal Angular.io module is authored for use within web applications developed by Educational Media Solutions.
Find the web application template source code on GitHub to review implementation in context.
Find a working example of this component here.
The embedded component and service expose an interface for rendering a modal overlay and content window. This component also implements keybord trapping and focus management to meet accessibility requirements.
Note that this component is typically used as a singleton, defined once and rendered at the top-most component level.
Also note that styling options are limited, and will need to be customized in your CSS files to meet the needs of your implementation.
This library was generated with Angular CLI version 13.2.0.
Note that this module has a peer dependency on ems-web-app-utils and underscore.js
npm i underscore ems-web-app-utils ems-web-app-modal
Module Implementation
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ModalModule, ModalService } from "ems-web-app-modal";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ModalModule
],
providers: [ ModalService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Example placement of <modal/> node in DOM:
<body app>
<some-app-component class="modal-blur"></some-app-component>
<some-other-component class="modal-blur"></some-other-component>
<modal [transition-speed]="250" [z-index]="99" background="rgba(255,255,0,0.25)"></modal>
</body>
Template attributes with defaults:
"transition-speed": number = 1000; // speed of fade in / fade out
"background": string = "rgba(255,255,255,0.25)"; //modal background
"z-index": number = 10000;
Note the usage of the "modal-blur" class above. The Modal component adds a blur filter to any elements with this class.
Example request to render modal from another component:
import { Component, ViewChild, TemplateRef } from '@angular/core';
import { ModalData, ModalService } from "ems-web-app-modal";
@Component({
selector: 'some-app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class SomeAppComponent {
@ViewChild("modalTest") modalTemplate!: TemplateRef<any>;
public title: string = "modal title";
constructor(private modal: ModalService) {}
showModal() {
const data = new ModalData();
data.preventClickToDismiss = true; //defaults to false -- controls whether user can click outside of the modal context box to dismiss the view
data.initialized = (element: HTMLElement, data: ModalData) => console.log(element); //optional callback after modal has been rendered
data.template = this.modalTemplate;
data.cancel = this.closeModal; //required invoked if user types ESC key or clicks outside content box to hide modal
this.modal.setCurrentModal(data);
}
closeModal = () => {
this.modal.setCurrentModal(null);
}
}
Example template for the calling component:
<div class="control-buttons">
<button (click)="showModal()" [ngStyle]="{'z-index': 10000, position: 'relative'}">Show Modal</button>
</div>
<div class="content-panel">
<p>Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<ng-template #modalTest>
<p>#1: Hello from the modal template {{ title }}</p>
<div class="buttons">
<button class="button" (click)="closeModal()">Close</button>
</div>
</ng-template>
Note that modals can be "stacked"... if you call setCurrentModal multiple times. Each subsequent modal closure removes the most recently added modal from the stack.
Run ng generate component component-name --project Modal to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project Modal.
Note: Don't forget to add
--project Modalor else it will be added to the default project in yourangular.jsonfile.
Run ng build Modal to build the project. The build artifacts will be stored in the dist/ directory.
After building your library with ng build Modal, go to the dist folder cd dist/modal and run npm publish.
Run ng test Modal to execute the unit tests via Karma.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
FAQs
The embedded component and service expose an interface for rendering a modal overlay and content window. This component also implements keybord trapping and focus management to meet accessibility requirements.
The npm package ems-web-app-modal receives a total of 18 weekly downloads. As such, ems-web-app-modal popularity was classified as not popular.
We found that ems-web-app-modal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.