Class IgxToastComponent

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:

<button type="button" igxButton (click)="toast.open()">Show notification</button>
<igx-toast #toast displayTime="1000">
Notification displayed
</igx-toast>

Hierarchy

Hierarchy

  • IgxNotificationsDirective
    • IgxToastComponent

Implements

  • OnInit

Constructors

Properties

appended: EventEmitter<ToggleViewEventArgs> = ...

Emits an event after the toggle element is appended to the overlay container.

onAppended() {
alert("Content appended!");
}
<div
igxToggle
(appended)='onToggleAppended()'>
</div>
ariaLive: string = 'polite'

Sets/gets the aria-live attribute. If not set, aria-live will have value "polite".

autoHide: boolean = true

Sets/gets whether the element will be hidden after the displayTime is over. Default value is true.

closed: EventEmitter<ToggleViewEventArgs> = ...

Emits an event after the toggle container is closed.

onToggleClosed(event) {
alert("Toggle closed!");
}
<div
igxToggle
(closed)='onToggleClosed($event)'>
</div>
closing: EventEmitter<ToggleViewCancelableEventArgs> = ...

Emits an event before the toggle container is closed.

onToggleClosing(event) {
alert("Toggle closing!");
}
<div
igxToggle
(closing)='onToggleClosing($event)'>
</div>
displayTime: number = 4000

Sets/gets the duration of time span (in milliseconds) which the element will be visible after it is being shown. Default value is 4000.

id: string = ...

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;
opened: EventEmitter<ToggleViewEventArgs> = ...

Emits an event after the toggle container is opened.

onToggleOpened(event) {
alert("Toggle opened!");
}
<div
igxToggle
(opened)='onToggleOpened($event)'>
</div>
opening: EventEmitter<ToggleViewCancelableEventArgs> = ...

Emits an event before the toggle container is opened.

onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(opening)='onToggleOpening($event)'>
</div>
outlet: IgxOverlayOutletDirective | ElementRef<HTMLElement>

Gets/Sets the container used for the element.

Remarks

outlet is an instance of IgxOverlayOutletDirective or an ElementRef.

role: string = 'alert'

Sets/gets the role attribute. If not set, role will have value "alert".

<igx-toast [role] = "'notify'"></igx-toast>
let toastRole = this.toast.role;

Memberof

IgxToastComponent

Accessors

  • get positionSettings(): PositionSettings
  • Get the position and animation settings used by the toast.

    @ViewChild('toast', { static: true }) public toast: IgxToastComponent;
    let currentPosition: PositionSettings = this.toast.positionSettings

    Returns PositionSettings

  • set positionSettings(settings): void
  • 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;

    Parameters

    Returns void

Methods

  • 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

    Parameters

    • deltaX: number
    • deltaY: number
    • Optional offsetMode: OffsetMode

    Returns void