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 (click)="toast.show()">Show notification</button>
<igx-toast #toast
          message="Notification displayed"
          displayTime="1000">
</igx-toast>

Hierarchy

  • IgxToastComponent

Implements

Constructors

constructor

Properties

autoHide

autoHide: boolean = true

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

<igx-toast [autoHide] = "false"></igx-toast>
let autoHide = this.toast.autoHide;
memberof

IgxToastComponent

displayTime

displayTime: number = 4000

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

<igx-toast [displayTime] = "2500"></igx-toast>
let displayTime = this.toast.displayTime;
memberof

IgxToastComponent

id

id: string = `igx-toast-${NEXT_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;

isVisible

isVisible: boolean = false

Enables/Disables the visibility of the toast. If not set, the isVisible attribute will have value false.

<igx-toast [isVisible] = "true"></igx-toast>
let isVisible = this.toast.isVisible;
memberof

IgxToastComponent

message

message: string

Sets/gets the message that will be shown by the toast.

<igx-toast [message] = "Notification"></igx-toast>
let toastMessage = this.toast.message;
memberof

IgxToastComponent

onHidden

onHidden: EventEmitter<IgxToastComponent> = new EventEmitter<IgxToastComponent>()

Emits an event when the toast is hidden. Provides reference to the IgxToastComponent as event argument.

<igx-toast (onHidden) = "onHidden($event)"></igx-toast>
memberof

IgxToastComponent

onHiding

onHiding: EventEmitter<IgxToastComponent> = new EventEmitter<IgxToastComponent>()

Emits an event prior the toast is hidden. Provides reference to the IgxToastComponent as event argument.

<igx-toast (onHiding) = "onHiding($event)"></igx-toast>
memberof

IgxToastComponent

onShowing

onShowing: EventEmitter<IgxToastComponent> = new EventEmitter<IgxToastComponent>()

Emits an event prior the toast is shown. Provides reference to the IgxToastComponent as event argument.

<igx-toast (onShowing) = "onShowing($event)"></igx-toast>
memberof

IgxToastComponent

onShown

onShown: EventEmitter<IgxToastComponent> = new EventEmitter<IgxToastComponent>()

Emits an event when the toast is shown. Provides reference to the IgxToastComponent as event argument.

<igx-toast (onShown) = "onShown($event)"></igx-toast>
memberof

IgxToastComponent

position

position: IgxToastPosition = IgxToastPosition.Bottom

Sets/gets the position of the toast. If not set, the position attribute will have value IgxToastPosition.Bottom.

<igx-toast [position] = "top"></igx-toast>
let toastPosition = this.toast.position;
memberof

IgxToastComponent

role

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

element

  • get element(): any
  • Gets the nativeElement of the toast.

    let nativeElement = this.toast.element;
    memberof

    IgxToastComponent

    Returns any

Methods

hide

  • hide(): void

mapPositionToClassName

  • mapPositionToClassName(): any
  • Sets/gets the class name of the toast based on the position value.

    let className =  this.toast.mapPositionToClassName();
    memberof

    IgxToastComponent

    Returns any

show

  • show(): void
  • Shows the toast. If autoHide is enabled, the toast will hide after displayTime is over.

    this.toast.show();
    memberof

    IgxToastComponent

    Returns void

toggle

  • toggle(): void

Object literals

CSS_CLASSES

CSS_CLASSES: object

Returns a list of available CSS classes.

let toastClasses =  this.toast.CSS_CLASSES;
memberof

IgxToastComponent

IGX_TOAST_BOTTOM

IGX_TOAST_BOTTOM: string = "igx-toast--bottom"

IGX_TOAST_MIDDLE

IGX_TOAST_MIDDLE: string = "igx-toast--middle"

IGX_TOAST_TOP

IGX_TOAST_TOP: string = "igx-toast--top"