Fires after the banner hides
public handleClosed(event) {
...
}<igx-banner (onClosed)="handleClosed($event)"></igx-banner>Fires before the banner hides
public handleClosing(event) {
...
}<igx-banner (onClosing)="handleClosing($event)"></igx-banner>Fires after the banner shows up
public handleOpened(event) {
...
}<igx-banner (onOpened)="handleOpened($event)"></igx-banner>Fires before the banner shows up
public handleOpening(event) {
...
}<igx-banner (onOpening)="handleOpening($event)"></igx-banner>Get the animation settings used by the banner open/close methods
let currentAnimations: AnimationSettings = banner.animationSettingsSet the animation settings used by the banner open/close methods
import { slideInLeft, slideOutRight } from 'igniteui-angular';
...
banner.animationSettings: AnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };Gets whether banner is collapsed
const isCollapsed: boolean = banner.collapsed;Returns the native element of the banner component
const myBannerElement: HTMLElement = banner.element;Closes the banner
myBanner.close();<igx-banner #banner>
...
</igx-banner>
<button (click)="banner.close()">Close Banner</button>Opens the banner
myBanner.open();<igx-banner #banner>
...
</igx-banner>
<button (click)="banner.open()">Open Banner</button>Toggles the banner
myBanner.toggle();<igx-banner #banner>
...
</igx-banner>
<button (click)="banner.toggle()">Toggle Banner</button>
Ignite UI for Angular Banner - Documentation
The Ignite UI Banner provides a highly templateable and easy to use banner that can be shown in your application.
Usage:
<igx-banner #banner> Our privacy settings have changed. <igx-banner-actions> <button igxButton="raised">Read More</button> <button igxButton="raised">Accept and Continue</button> </igx-banner-actions> </igx-banner>