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

  • IgxNotificationsDirective
    • IgxSnackbarComponent

Implements

  • OnInit

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
(onAppended)='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
(onClosed)='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;

Memberof

IgxSnackbarComponent

opened: EventEmitter<ToggleViewEventArgs> = ...

Emits an event after the toggle container is opened.

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

Emits an event before the toggle container is opened.

onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(onOpening)='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.

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): 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