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.