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>

Constructors

Section titled "Constructors"

IgxToastComponent

new IgxToastComponent(): IgxToastComponent

Returns IgxToastComponent

Properties

Section titled "Properties"

appended

Section titled "appended"

Inherited from: IgxNotificationsDirective

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

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

Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:143

ariaLive

Section titled "ariaLive"

Inherited from: IgxNotificationsDirective

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

 
ariaLive: string = 'polite'

Defined in projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:15

autoHide

Section titled "autoHide"

Inherited from: IgxNotificationsDirective

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

 
autoHide: boolean = true

Defined in projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:22

closed

Section titled "closed"

Inherited from: IgxNotificationsDirective

Emits an event after the toggle container is closed.

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

Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:105

closing

Section titled "closing"

Inherited from: IgxNotificationsDirective

Emits an event before the toggle container is closed.

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

Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:124

displayTime

Section titled "displayTime"

Inherited from: IgxNotificationsDirective

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

 
displayTime: number = 4000

Defined in projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:30

id

Section titled "id"

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;
id: string

Defined in projects/igniteui-angular/toast/src/toast/toast.component.ts:57

opened

Section titled "opened"

Inherited from: IgxNotificationsDirective

Emits an event after the toggle container is opened.

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

Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:67

opening

Section titled "opening"

Inherited from: IgxNotificationsDirective

Emits an event before the toggle container is opened.

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

Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:86

outlet

Section titled "outlet"

Inherited from: IgxNotificationsDirective

Gets/Sets the container used for the element.

 
outlet: IgxOverlayOutletDirective | ElementRef<HTMLElement>

Defined in projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:43

Remarks

outlet is an instance of IgxOverlayOutletDirective or an ElementRef.

positioning

Section titled "positioning"

Inherited from: IgxNotificationsDirective

Controls whether positioning is relative to the viewport or to the nearest positioned container.

 
positioning: "container" | "viewport" = 'viewport'

Defined in projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:49

role

Section titled "role"

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

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

Defined in projects/igniteui-angular/toast/src/toast/toast.component.ts:73

isVisible

Section titled "isVisible"

Inherited from: IgxNotificationsDirective 

isVisible: boolean

Defined in projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:56, projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:60

positionSettings

Section titled "positionSettings" 
positionSettings: PositionSettings

Defined in projects/igniteui-angular/toast/src/toast/toast.component.ts:89, projects/igniteui-angular/toast/src/toast/toast.component.ts:113

Accessors

Section titled "Accessors"

element

Section titled "element"

Gets the nativeElement of the toast.

let nativeElement = this.toast.element;
get element(): any

Defined in projects/igniteui-angular/toast/src/toast/toast.component.ts:132

Returns any

overlayId

Section titled "overlayId"

Inherited from: IgxNotificationsDirective

Returns the id of the overlay the content is rendered in.

this.myToggle.overlayId;
get overlayId(): string

Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:303

Returns string

Methods

Section titled "Methods"

close

Section titled "close"

Inherited from: IgxNotificationsDirective

Hides the element.

close(): void

Defined in projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts:114

Returns void

open

Section titled "open"

Shows the toast. If autoHide is enabled, the toast will hide after displayTime is over.

this.toast.open();
open(message: string, settings: PositionSettings): void

Defined in projects/igniteui-angular/toast/src/toast/toast.component.ts:144

Parameters

Returns void

reposition

Section titled "reposition"

Inherited from: IgxNotificationsDirective

Repositions the toggle.

this.myToggle.reposition();
reposition(): void

Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:313

Returns void

setOffset

Section titled "setOffset"

Inherited from: IgxNotificationsDirective

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

setOffset(deltaX: number, deltaY: number, offsetMode: OffsetMode): void

Defined in projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts:321

Parameters

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

Returns void

toggle

Section titled "toggle"

Opens or closes the toast, depending on its current state.

this.toast.toggle();
toggle(): void

Defined in projects/igniteui-angular/toast/src/toast/toast.component.ts:162

Returns void