Emits an event after the toggle element is appended to the overlay container.
onAppended() {
alert("Content appended!");
}
<div
igxToggle
(appended)='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
(closed)='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
(opened)='onToggleOpened($event)'>
</div>
Emits an event before the toggle container is opened.
onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(opening)='onToggleOpening($event)'>
</div>
Gets/Sets the container used for the element.
Sets/gets the role attribute.
If not set, role will have value "alert".
<igx-toast [role] = "'notify'"></igx-toast>
let toastRole = this.toast.role;
Gets the nativeElement of the toast.
let nativeElement = this.toast.element;
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();
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
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: