angular-io-overlay

Overlay component that allows open a component in popup for Angular 2.

Motivation

Existing popups do not work as they should... So we have written another one 😏

Installation

npm i angular-io-overlay --save

Code Example

Demo

First of all you'll need to add OverlayModule to your application module.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    OverlayModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {}

After that import AlignType and OverlayService to your component. Also we need ElementRef, ComponentRef and ViewChild from @angular/core. And import your component that will be in popup.

import { AlignType, OverlayService } from "../overlay";
import { ElementRef, ComponentRef, ViewChild } from "@angular/core";
import { ComponentThatShouldBeInPopup } from "./foobar";

Inject OverlayService in your constructor arguments like this.

constructor(private overlayService: OverlayService) {}

Add a private property _popupRef.

private _popupRef: ComponentRef<any>;

You will need to add a reference to the element that you will align with. Don't forget use it in your component constructor.

<div #alignWithContainer></div>

@ViewChild("alignWithContainer") alignWithContainer: ElementRef;

Then add overlay-host element where is located your component to html.

<awesomeComponent></awesomeComponent>
<overlay-host></overlay-host>

And now you can use OverlayService in your code.

this.overlayService.openComponentInPopup<ComponentThatShouldBeInPopup>(
            ComponentThatShouldBeInPopup, {
                alignWithElement: this.alignWithContainer,
                alignment: {
                    element: {
                        horizontal: AlignType.Left,
                        vertical: AlignType.Top
                    },
                    target: {
                        horizontal: AlignType.Left,
                        vertical: AlignType.Bottom
                    }
                },
                closeOnClick: true
            }
        ).then(c => {
            this._popupRef = c;
            this._popupRef.onDestroy(() => {
                this._popupRef = null;
            });
        });

API Reference

|Property |Type |Default |Description | | :--------------- | :------- | :-------- | :-------------------------------------------------------- | |alignWithElement|ElementRef|undefined|Reference to the element that popup will align with | |alignment |Alignment |defaultAlign: Alignment = {element: {horizontal: AlignType.Left,vertical: AlignType.Top},target: {horizontal: AlignType.Left,vertical: AlignType.Bottom}};|Align element(Popup) with target(this.alignWithContainer)| |closeOnClick |boolean |true |Close popup and destroy thn component on click out of popup|

License

This project is licensed under the MIT license. See the LICENSE file for more info.