npm package: @impactdk/overlay
Description: A module to easily add open and manage overlays with injected components in your Angular application
Author: Martin Hobert
Latest version: 1.1.3
Deprecated: Package has been renamed to @impactdk/ngx-overlay to reference Angular

# Overlay
A module to create and manage overlays.

## Installation
Simply import the OverlayModule from "@impactdk/overlay" in your AppModule. Any component that needs to be injected into the overlay needs to be placed into the entryComponents of a given module.

```typescript
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';

import { OverlayModule } from '@impact/overlay';
import { SidebarComponent } from './sidebar/sidebar.component';

@NgModule({
  imports: [BrowserModule, OverlayModule],
  declarations: [AppComponent, SidebarComponent],
  bootstrap: [AppComponent],
  providers: [],
  entryComponents: [SidebarComponent]
})
export class AppModule {}
```

### Overlay styles
In order for the overlay to have the proper styles you must im`port `@impactdk/overlay/base into your main style file.

```scss
@import "~@impactdk/overlay/base";
```

This is only needed if you dont use material theme already as it is included in the core.

### Opening an overlay
To open an overlay simply inject the overlay service into your component and trigger the open method on the class and pass in the component you want to inject.

```typescript
this.overlay.open(SidebarComponent);
```

### Passing data to the injected component
In order to send data to the component that was opened simply pass in the config object with the parameter "data" with what ever data you want to share.

```typescript
this.overlay.open(SidebarComponent, {data: { menuItems: [] }});
```

You can then use this data within the injected component by using the IMPACT_OVERLAY_DATA injection token

```typescript
export class SidebarComponent implements OnInit {
  constructor(
    public overlayRef: ImpactOverlayRef,
    @Inject(IMPACT_OVERLAY_DATA) public data: any
  ) {}

  ngOnInit() {
    console.log(this.data);
  }
}
```

### Closing an overlay
By default the overlay will close automaticly when the backdrop is pressed. If you want to manually close the overlay simply invoke the close method on the overlayRef

```typescript
export class SidebarComponent implements OnInit {
  constructor(
    public overlayRef: ImpactOverlayRef,
    @Inject(IMPACT_OVERLAY_DATA) public data: any
  ) {}

  closeSidebar() {
    this.overlayRef.close()
  }
}
```


### Animating in and out
In order to animate in, simply use the Angular Animations library to create a :enter animation.



#### Animating out
Animating out however is not as easy as a cause of the limitations within the CDK.

First you must add the following properties to your component.
```typescript
export class SidebarComponent {
  animationState: 'void' | 'enter' | 'leave' = 'enter';
  animationStateChanged = new EventEmitter<AnimationEvent>();
  ...
}
```

After that you must implement the following methods in your component.
```typescript
export class SidebarComponent {
  ...
  onAnimationStart(event: AnimationEvent) {
    this.animationStateChanged.emit(event);
  }

  onAnimationDone(event: AnimationEvent) {
    this.animationStateChanged.emit(event);
  }

  startExitAnimation() {
    this.animationState = 'leave';
  }
  ...
}
```

And finally you must implement the animation triggers for start and done on the element you trigger your animations on like this.
```html
<section [@slideContent]="animationState"
         (@slideContent.start)="onAnimationStart($event)" 
         (@slideContent.done)="onAnimationDone($event)">
</section>
```

## Settings
At this time the service supports several config settings.

```typescript
export interface ImpactOverlayConfig {
  panelClass?: string | string[]; // Class around the panel wrapping the injected components (default: '')
  fullHeight?: boolean; // Decides if a panel should be full height or dependent on the component size (default: false)
  hasBackdrop?: boolean; // True/False if you want a backdrop or not (default: true)
  scrollBlock?: boolean; // True/False if you want the backdrop to block scroll (default: true)
  backdropClass?: string; // Add a class to the backdrop (default: ''cdk-overlay-dark-backdrop)
  positionVertical?: {
    placement: 'bottom' | 'top' | 'center'; // Decides the vertical position of the component within the backdrop (default: 'center')
    offset?: string; // Offset can be in any given css unit. (default: '0px')
  },
  positionHorizontal?: {
    placement: 'left' | 'right' | 'center'; // Decides the horizontal position of the component within the backdrop (default: 'center')
    offset?: string; // Offset can be in any given css unit. (default: '0px')
  }
  data?: any; // Any data that should be injected into the component (default: {})
}
```