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
- Popover API Integration: Uses the HTML Popover API for improved z-index management and automatic top-layer placement
- Flexible Positioning: Multiple position strategies (global, connected, auto, elastic, container)
- Scroll Strategies: Handle scroll behavior with NoOp, Block, Close, and Absolute strategies
- Modal Support: Optional modal backdrop with configurable close-on-outside-click behavior
- Animation Support: Built-in support for open/close animations
<div igxToggle>
</div>
@ViewChild(IgxToggleDirective) public igxToggle: IgxToggleDirective;
this.igxToggle.toggle();
this.overlay.show(component);
To use the IgxOverlay import the IgxOverlayService:
import { IgxOverlayService } from "igniteui-angular";
Then initialize the overlay settings, only if you need some different from default ones.
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:
this.overlay.show(component, overlaySettings);
| Name | Type | Description |
|---|
| positionSettings | PositionSettings | Settings to apply to this position strategy |
| Name | Type | Description |
|---|
| target | Point | HTMLElement |
| 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 | Deprecated. Set the outlet container to attach the overlay to |
| 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[] |
| closeAnimation | AnimationMetadata | AnimationMetadata[] |
| minSize | Size | The size up to which element may shrink when shown in elastic position strategy |
| Name | Type | Description |
|---|
| injector | Injector | An Injector instance to add in the created component ref's injectors tree |
| 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, overlayCreateSettings?, |
| attach | Generates Id. Provide this Id when call show(id, settings?) method | component, viewContainerRef, overlaySettings? |
| 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 with optional offsetMode that determines whether to add (by default) or set the offset values with OffsetMode.Add and OffsetMode.Set | id, deltaX, deltaY, offsetMode? |
| Name | Description | Parameters |
|---|
| position | Positions provided element | element |
| clone | Clones the position strategy and its settings | - |
| Name | Description | Parameters |
|---|
| initialize | Initialize the strategy. Should be called once | document, overlayService, id |
| attach | Attaches the strategy | - |
| detach | Detaches the strategy | - |
| 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?, useContainerStrategy? |
| createRelativeOverlaySettings | Creates overlay settings with auto, connected or elastic position strategy based on a preset position settings | target, strategy?, position? |
| 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 | |