# igx-overlay

The overlay service allows users to show components on overlay div above all other elements in the page.
A walk through of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-main)

## Usage

### With igxToggleDirective

```html
<div igxToggle></div>
```

```typescript
@ViewChild(IgxToggleDirective) public igxToggle: IgxToggleDirective;
this.igxToggle.toggle();
```

---

### Directly through the service

```typescript
this.overlay.show(component);
```

## Getting Started

### Dependencies

To use the IgxOverlay import the IgxOverlayService:

```typescript
import { IgxOverlayService } from "igniteui-angular-sovn";
```

Then initialize the overlay settings, only if you need some different from default ones.

```typescript
overlaySettings: OverlaySettings = {
    target: new Point(0, 0),
    positionStrategy: new GlobalPositionStrategy(),
    scrollStrategy: new NoOpScrollStrategy(),
    modal: true,
    closeOnOutsideClick: true,
};
```

Finally show the component you need with the overlay settings you need:

```typescript
this.overlay.show(component, overlaySettings);
```

## API

##### Interfaces

###### IPositionStrategy

| Name             | Type             | Description                                 |
| :--------------- | :--------------- | :------------------------------------------ |
| positionSettings | PositionSettings | Settings to apply to this position strategy |

###### OverlaySettings

| Name                | Type                                    | Description                                       |
| :------------------ | :-------------------------------------- | :------------------------------------------------ | ------------------------------------------ |
| target              | Point                                   | HTMLElement                                       | Attaching target for the component to show |
| positionStrategy    | IPositionStrategy                       | Position strategy to use with this settings       |
| scrollStrategy      | IScrollStrategy                         | Scroll strategy to use with this settings         |
| modal               | boolean                                 | Set if the overlay should be in modal mode        |
| closeOnOutsideClick | boolean                                 | Set if the overlay should closed on outside click |
| outlet              | IgxOverlayOutletDirective or ElementRef | Set the outlet container to attach the overlay to |

###### PositionSettings

| Name                 | Type                | Description                                                                     |
| :------------------- | :------------------ | :------------------------------------------------------------------------------ | -------------------------------------- |
| horizontalDirection  | HorizontalAlignment | Direction in which the component should show                                    |
| verticalDirection    | VerticalAlignment   | Direction in which the component should show                                    |
| horizontalStartPoint | HorizontalAlignment | Target's starting point                                                         |
| verticalStartPoint   | VerticalAlignment   | Target's starting point                                                         |
| openAnimation        | AnimationMetadata   | AnimationMetadata[]                                                             | Animation applied while overlay opens  |
| closeAnimation       | AnimationMetadata   | AnimationMetadata[]                                                             | Animation applied while overlay closes |
| minSize              | Size                | The size up to which element may shrink when shown in elastic position strategy |

##### Methods

###### IgxOverlayService

| Name       | Description                                                             | Parameters                              |
| ---------- | ----------------------------------------------------------------------- | --------------------------------------- |
| attach     | Generates Id. Provide this Id when call `show(id, settings?)` method    | element, overlaySettings?               |
| attach     | Generates Id. Provide this Id when call `show(id, settings?)` method    | component, overlaySettings?, moduleRef? |
| show       | Shows the provided component on the overlay                             | id, overlaySettings?                    |
| hide       | Hides the component with the ID provided as a parameter                 | id                                      |
| hideAll    | Hides all the components and the overlay                                | -                                       |
| detach     | Remove overlay with the provided id                                     | id                                      |
| detachAll  | Remove all the overlays                                                 | -                                       |
| reposition | Repositions the native element of the component with provided id        | id                                      |
| setOffset  | Offsets the content along the corresponding axis by the provided amount | id, deltaX, deltaY                      |

###### IPositionStrategy

| Name     | Description                                   | Parameters |
| -------- | --------------------------------------------- | ---------- |
| position | Positions provided element                    | element    |
| clone    | Clones the position strategy and its settings | -          |

###### IScrollStrategy

| Name       | Description                                    | Parameters                   |
| ---------- | ---------------------------------------------- | ---------------------------- |
| initialize | Initialize the strategy. Should be called once | document, overlayService, id |
| attach     | Attaches the strategy                          | -                            |
| detach     | Detaches the strategy                          | -                            |

###### static methods

| Name                          | Description                                                                                                    | Parameters                   |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| getPointFromPositionsSettings | Calculates the point from which the overlay should start showing                                               | settings                     |
| createAbsoluteOverlaySettings | Creates overlay settings with global or container position strategy based on a preset position settings        | position?, outlet?           |
| createRelativeOverlaySettings | Creates overlay settings with auto, connected or elastic position strategy based on a preset position settings | target, strategy?, position? |

##### Events

###### IgxOverlayService

| Name              | Description                                  | Cancelable | Parameters |
| ----------------- | -------------------------------------------- | ---------- | ---------- |
| opening           | Emitted before overlay shows                 | true       |            |
| opened            | Emitted after overlay shows                  | false      |            |
| closing           | Emitted before overlay hides                 | true       |            |
| closed            | Emitted after overlay hides                  | false      |            |
| contentAppending  | Emitted before overlay's content is appended | false      |            |
| contentAppended   | Emitted after overlay's content is appended  | false      |            |
| animationStarting | Emitted before animation is started          | false      |            |