a4-overlay

Handle overlay for the entire screen

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
a4-overlay
Minified + gzip package size for a4-overlay in KB

Readme

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. ```typescript ... import { ViewContainerRef } from '@angular/core'; ...

constructor(private viewContainerRef: ViewContainerRef) { }


## your.component.ts
1. Add ```overlayService: OverlayService``` to the constructor of your component.
```typescript
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
    

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.