Fires after the banner hides
public handleClosed(event) {
...
}
<igx-banner (closed)="handleClosed($event)"></igx-banner>
Fires before the banner hides
public handleClosing(event) {
...
}
<igx-banner (closing)="handleClosing($event)"></igx-banner>
Fires after the banner shows up
public handleOpened(event) {
...
}
<igx-banner (opened)="handleOpened($event)"></igx-banner>
Fires before the banner shows up
public handleOpening(event) {
...
}
<igx-banner (opening)="handleOpening($event)"></igx-banner>
Get the animation settings used by the banner open/close methods
let currentAnimations: ToggleAnimationSettings = banner.animationSettings
Set the animation settings used by the banner open/close methods
import { slideInLeft, slideOutRight } from 'igniteui-angular';
...
banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };
Gets whether the banner is collapsed.
const isCollapsed: boolean = banner.collapsed;
Returns the native element of the banner component
const myBannerElement: HTMLElement = banner.element;
Gets/Sets whether the banner is expanded (visible) or collapsed (hidden).
Defaults to false
.
Setting to true
opens the banner, while false
closes it.
Closes the banner
myBanner.close();
<igx-banner #banner>
...
</igx-banner>
<button type="button" (click)="banner.close()">Close Banner</button>
Opens the banner
myBanner.open();
<igx-banner #banner>
...
</igx-banner>
<button type="button" (click)="banner.open()">Open Banner</button>
Toggles the banner
myBanner.toggle();
<igx-banner #banner>
...
</igx-banner>
<button type="button" (click)="banner.toggle()">Toggle Banner</button>
Ignite UI for Angular Banner - Documentation
The Ignite UI Banner provides a highly template-able and easy to use banner that can be shown in your application.
Usage: