Emits an event after the toggle element is appended to the overlay container.
onAppended() {
alert("Content appended!");
}
<div
igxToggle
(onAppended)='onToggleAppended()'>
</div>
Sets/gets the aria-live attribute.
If not set, aria-live will have value "polite".
Sets/gets whether the element will be hidden after the displayTime is over.
Default value is true.
Emits an event after the toggle container is closed.
onToggleClosed(event) {
alert("Toggle closed!");
}
<div
igxToggle
(onClosed)='onToggleClosed($event)'>
</div>
Emits an event before the toggle container is closed.
onToggleClosing(event) {
alert("Toggle closing!");
}
<div
igxToggle
(closing)='onToggleClosing($event)'>
</div>
Sets/gets the duration of time span (in milliseconds) which the element will be visible
after it is being shown.
Default value is 4000.
Sets/gets the id of the toast.
If not set, the id will have value "igx-toast-0".
<igx-toast id = "my-first-toast"></igx-toast>
let toastId = this.toast.id;
Emits an event after the toggle container is opened.
onToggleOpened(event) {
alert("Toggle opened!");
}
<div
igxToggle
(onOpened)='onToggleOpened($event)'>
</div>
Emits an event before the toggle container is opened.
onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(onOpening)='onToggleOpening($event)'>
</div>
Gets/Sets the container used for the element.
outlet is an instance of IgxOverlayOutletDirective or an ElementRef.
Sets/gets the role attribute.
If not set, role will have value "alert".
<igx-toast [role] = "'notify'"></igx-toast>
let toastRole = this.toast.role;
IgxToastComponent
Gets the nativeElement of the toast.
let nativeElement = this.toast.element;
IgxToastComponent
Enables/Disables the visibility of the element.
If not set, the isVisible attribute will have value false.
Returns the id of the overlay the content is rendered in.
this.myToggle.overlayId;
Get the position and animation settings used by the toast.
@ViewChild('toast', { static: true }) public toast: IgxToastComponent;
let currentPosition: PositionSettings = this.toast.positionSettings
Set the position and animation settings used by the toast.
<igx-toast [positionSettings]="newPositionSettings"></igx-toast>
import { slideInTop, slideOutBottom } from 'igniteui-angular';
...
@ViewChild('toast', { static: true }) public toast: IgxToastComponent;
public newPositionSettings: PositionSettings = {
openAnimation: useAnimation(slideInTop, { params: { duration: '1000ms', fromPosition: 'translateY(100%)'}}),
closeAnimation: useAnimation(slideOutBottom, { params: { duration: '1000ms', fromPosition: 'translateY(0)'}}),
horizontalDirection: HorizontalAlignment.Left,
verticalDirection: VerticalAlignment.Middle,
horizontalStartPoint: HorizontalAlignment.Left,
verticalStartPoint: VerticalAlignment.Middle
};
this.toast.positionSettings = this.newPositionSettings;
Shows the toast.
If autoHide is enabled, the toast will hide after displayTime is over.
this.toast.open();
Ignite UI for Angular Toast - Documentation
The Ignite UI Toast provides information and warning messages that are non-interactive and cannot be dismissed by the user. Toasts can be displayed at the bottom, middle, or top of the page.
Example: