ngx-window

Note: This is essentially a beta version of sorts. It's just been released and will soon start to be tested in a real life application. Until this note is removed, expect bugs, performance issues and incomplete documentation. You're more than welcome to help by Contributing.

A generic, light weight, window layer component for Angular 2+ to allow front layer windows such as: dropdowns, popups, modals, tooltips, etc.

Features

• Windows are not affected by attributes of the reference element's hierarchy, e.g. overflow, display, position, etc.
• Controlled from the component using it, and can be opened, closed or toggled programmatically
• Enables closing from within using the WindowCloser directive
• Supports alignment to the viewport, or the reference element (when exists) according to several anchor points (future plans include automatic alignment based on available viewport space), including an offset from the anchor point
• Configurable automatic closing when:
  • Clicked elsewhere
  • Reference element is off view
• Automatic position adjustments upon:
  • Reference element move
  • Reference element resize
  • Reference element scroll (or container)
  • Window resize
• Fires events when the window becomes visible/invisible

Dependencies

Latest version available for each version of Angular

ngx-window-component	Angular
0.1.0	18.x
0.0.10	17.x
0.0.7	16.x
0.0.5	13.x

Install

1npm install ngx-window-component --save

Run demo application

Clone this repository and then:

1npm install
2npm run start

Use

App module definition:

1@NgModule({
2    imports: [ NgxWindowModule ],
3    declarations: [ AppComponent ],
4    bootstrap: [AppComponent]
5    ...
6})
7export class AppModule {}

Drop down component template:

1<button (click)="dropDownWindow.toggle()" #dropDownButton>Toggle dropdown</button>
2<ngx-window [refElement]="dropDownButton" [options]="{ alignment: { reference: { vertical: 'bottom' } } }"
3    [width]="200" [height]="250" (visibleChange)="onVisibleChange($event)" #dropDownWindow>
4    <div class="drop-down-content">
5        <ng-content></ng-content>
6    </div>
7</ngx-window>

Note: The NgxWindowModule should only be imported once and only in the module that bootstraps the application.

Options

Option	Type	Default	Description
visibility.startOpen	boolean	false	The window will be become visible automatically
visibility.keepOpen.onClickOutside	boolean	false	Stay open even will clicked outside of the window hierarchy or reference element
visibility.keepOpen.onIntersection	boolean	false	Stay open when the reference element gets out of view
alignment.window.horizontal	union see below	'left'	Align the window according to its specified horizontal anchor
alignment.window.vertical	union see below	'top'	Align the window according to its specified vertical anchor
alignment.reference.horizontal	union see below	'left'	Align the window according to the reference element's specified horizontal anchor
alignment.reference.vertical	union see below	'top'	Align the window according to the reference element's specified vertical anchor

Horizontal Anchors

1export type HorizontalAnchor = 'left' | 'center' | 'right';

Vertical Anchors

1export type VerticalAnchor = 'top' | 'center' | 'bottom';

Functions

Function	Parameters	Description
Open	none	Opens (shows) the window
Close	none	Closes (hides) the window
Toggle	none	Opens the window if closed, or closes it if open

Events