Ignite UI for Angular

All
  • Public
  • Public/Protected
  • All

Class 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>

Hierarchy

Hierarchy (View Summary)

Implements

  • OnInit

Constructors

Properties

Accessors

Methods

Constructors

Properties

actionText?: string

Sets/gets the actionText attribute.

<igx-snackbar [actionText] = "'Action Text'"></igx-snackbar>
animationDone: EventEmitter<ToggleViewEventArgs> = ...

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

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>
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.

clicked: EventEmitter<IgxSnackbarComponent> = ...

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>
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 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;

IgxSnackbarComponent

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.

outlet is an instance of IgxOverlayOutletDirective or an ElementRef.

Accessors

  • get positionSettings(): PositionSettings

    Get the position and animation settings used by the snackbar.

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

    Returns PositionSettings

  • set positionSettings(settings: PositionSettings): void

    Set the position and animation settings used by the snackbar.

    <igx-snackbar [positionSettings]="newPositionSettings"></igx-snackbar>

    import { slideInTop, slideOutBottom } from 'igniteui-angular';
    ...
    @ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
     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,
         minSize: { height: 100, width: 100 }
     };
    this.snackbar.positionSettings = this.newPositionSettings;

    Parameters

    Returns void

Methods