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
(onAppended)='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
(onClosed)='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
(onOpened)='onToggleOpened($event)'>
</div>
Emits an event before the toggle container is opened.
onToggleOpening(event) {
alert("Toggle opening!");
}
<div
igxToggle
(onOpening)='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: