IgxSnackbarComponent

Ignite UI for Angular Snackbar - Documentation

The Ignite UI Snack Bar provides feedback about an operation with a single-line message, which can include a link to an action such as Undo.

Example:

<button type="button" igxButton (click)="snackbar.show()">Send message</button>
<div>
  <igx-snackbar #snackbar>
     Message sent
  </igx-snackbar>
</div>

Constructors

new IgxSnackbarComponent(): IgxSnackbarComponent

Returns IgxSnackbarComponent

Properties

Optional actionText

Sets/gets the actionText attribute.

<igx-snackbar [actionText] = "'Action Text'"></igx-snackbar>

actionText: string

Defined in projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:72

animationDone

An event that will be emitted when the snackbar animation ends. Provides reference to the ToggleViewEventArgs interface as an argument.

<igx-snackbar (animationDone) = "animationDone($event)"></igx-snackbar>

animationDone: EventEmitter<ToggleViewEventArgs>

Defined in projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:100

animationStarted

An event that will be emitted when the snackbar animation starts. Provides reference to the ToggleViewEventArgs interface as an argument.

<igx-snackbar (animationStarted) = "animationStarted($event)"></igx-snackbar>

animationStarted: EventEmitter<ToggleViewEventArgs>

Defined in projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:91

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

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

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

clicked

An event that will be emitted when the action button is clicked. Provides reference to the IgxSnackbarComponent as an argument.

<igx-snackbar (clicked)="clickedHandler($event)"></igx-snackbar>

clicked: EventEmitter<IgxSnackbarComponent>

Defined in projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:82

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

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

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

Sets/gets the id of the snackbar. If not set, the id of the first snackbar component will be "igx-snackbar-0";

<igx-snackbar id = "Snackbar1"></igx-snackbar>

let snackbarId = this.snackbar.id;

id: string

Defined in projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:55

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

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

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

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

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

positionSettings: PositionSettings

Defined in projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:110, projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:135

Accessors

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

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

Shows the snackbar and hides it after the displayTime is over if autoHide is set to true.

this.snackbar.open();

open(message: string): void

Defined in projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:154

Parameters

message: string

Returns void

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

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

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

this.snackbar.toggle();

toggle(): void

Defined in projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts:172