a4-overlay

Angular 7 Overlay

How-To

Install

npm install a4-overlay

app.module.ts

1. Add OverlayModule to imports of the app.module.ts.

...
import { OverlayModule } from 'a4-overlay';
...

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

app.component.ts

1. Add viewContainerRef: ViewContainerRef to the constructor of app.component.ts.

...
import { ViewContainerRef } from '@angular/core';
...

constructor(private viewContainerRef: ViewContainerRef) { }

your.component.ts

1. Add overlayService: OverlayService to the constructor of your component.

constructor(private overlayService: OverlayService) { }

1. Invoking the overlay mask can be done by using the service as shown below.

this.overlayService.show(); // to show an overlay over the page
this.overlayService.hide(); // to hide the overlay