igniteui-angular-sovn
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
140 lines (103 loc) • 7.97 kB
Markdown
# 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 | |