Angular 2 Modal – Salesforce

Angular 2 Modal from Salesforce, you can use it to show content above the main application.

angular 2 modal
angular 2 modal

When the Modal window is displayed (opened) the Tab button (Keyboard) can be used to navigate inside the Modal window.

We can use the ESC button from the keyboard to close the Modal window.

Angular 2 Modal dialog developed using The Lightning Design System CSS Framework.

Angular 2 Modal window is a native Angular 2 directive (component) developed with typescript.

If you want to setup the environment read this article.

Try Online Example at the end of article: angular-2 modal

 

HTML File:


<div style="padding-left:10px;padding-top:10px">

<button type="button" nglButton="neutral" (click)="open()">Open Angular 2 Modal</button>
<button type="button" nglButton="neutral" (click)="open('large')">Open large</button>

<ngl-modal header="Angular 2 Modal Header" [(open)]="opened" [size]="size">
<div body>

<p>
When the Modal window is displayed (opened) the Tab button (Keyboard)
can be used to navigate inside the Modal window.</p>
<p>
We can use the ESC button from the keyboard to close the Modal window.
</p>
<p>
Angular 2 Modal dialog developed using The Lightning Design System CSS
Framework.
</p>
</div>
<button class="slds-button slds-button--neutral" (click)="cancel()">Cancel</button>
<button class="slds-button slds-button--neutral slds-button--brand">Save</button>
</ngl-modal>
</div>

 

Typescript file:


import {bootstrap}  from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {NGL_DIRECTIVES, provideNglConfig} from 'ng-lightning/ng-lightning';

@Component({
selector: 'my-app',
directives: [NGL_DIRECTIVES],
templateUrl: 'app/angular-2-modal.html'
})
export class Angular2Modal {

opened: boolean = false;
size: string;

open(size: string) {
this.size = size;
this.opened = !this.opened;
}

cancel() {
this.opened = false;
}
}

bootstrap(Angular2Modal, [provideNglConfig()]);

API Documentation:


<ngl-modal>

Content


[body]: Body content.

[tagline]: If you need to provide additional context inside the header.

button: Action buttons displayed on modal's footer.


Input


header: string: Heading text.

open: boolean: Whether modal is visible or not.

size?: 'large':  Whether modal has large or default size.


Output


openChange: EventEmitter<boolean>: emitted when modal's visibility is going to change to false

all files from here : ng-lightning

angular 2 modal