Optional actionSets/gets the actionText attribute.
<igx-snackbar [actionText] = "'Action Text'"></igx-snackbar>
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>
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>
Emits an event after the toggle element is appended to the overlay container.
onAppended() {
alert("Content appended!");
}
<div
igxToggle
(appended)='onToggleAppended()'>
</div>
Sets/gets the aria-live attribute.
If not set, aria-live will have value "polite".
Sets/gets whether the element will be hidden after the displayTime is over.
Default value is true.
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>
Emits an event after the toggle container is closed.
onToggleClosed(event) {
alert("Toggle closed!");
}
<div
igxToggle
(closed)='onToggleClosed($event)'>
</div>
Emits an event before the toggle container is closed.
onToggleClosing(event) {
alert("Toggle closing!");
}
<div
igxToggle
(closing)='onToggleClosing($event)'>
</div>
Sets/gets the duration of time span (in milliseconds) which the element will be visible
after it is being shown.
Default value is 4000.
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
Emits an event after the toggle container is opened.
onToggleOpened(event) {
alert("Toggle opened!");
}
<div
igxToggle
(opened)='onToggleOpened($event)'>
</div>
Emits an event before the toggle container is opened.
onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(opening)='onToggleOpening($event)'>
</div>
Gets/Sets the container used for the element.
outlet is an instance of IgxOverlayOutletDirective or an ElementRef.
Enables/Disables the visibility of the element.
If not set, the isVisible attribute will have value false.
Returns the id of the overlay the content is rendered in.
this.myToggle.overlayId;
Get the position and animation settings used by the snackbar.
@ViewChild('snackbar', { static: true }) public snackbar: IgxSnackbarComponent;
let currentPosition: PositionSettings = this.snackbar.positionSettings
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;
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: