Class IgxBannerComponent

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>

Hierarchy

  • IgxBannerComponent

Implements

Constructors

constructor

Properties

elementRef

elementRef: ElementRef

onClosed

onClosed: EventEmitter<BannerEventArgs> = new EventEmitter<BannerEventArgs>()

Fires after the banner hides

public handleClosed(event) {
 ...
}
<igx-banner (onClosed)="handleClosed($event)"></igx-banner>

onClosing

onClosing: EventEmitter<BannerCancelEventArgs> = new EventEmitter<BannerCancelEventArgs>()

Fires before the banner hides

public handleClosing(event) {
 ...
}
<igx-banner (onClosing)="handleClosing($event)"></igx-banner>

onOpened

onOpened: EventEmitter<BannerEventArgs> = new EventEmitter<BannerEventArgs>()

Fires after the banner shows up

public handleOpened(event) {
 ...
}
<igx-banner (onOpened)="handleOpened($event)"></igx-banner>

onOpening

onOpening: EventEmitter<BannerCancelEventArgs> = new EventEmitter<BannerCancelEventArgs>()

Fires before the banner shows up

public handleOpening(event) {
 ...
}
<igx-banner (onOpening)="handleOpening($event)"></igx-banner>

Accessors

animationSettings

  • Get the animation settings used by the banner open/close methods

    let currentAnimations: AnimationSettings = banner.animationSettings

    Returns AnimationSettings

  • Set the animation settings used by the banner open/close methods

    import { slideInLeft, slideOutRight } from 'igniteui-angular';
    ...
    banner.animationSettings: AnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };

    Parameters

    Returns void

collapsed

  • get collapsed(): boolean

element

  • get element(): any

Methods

close

  • close(event?: Event): void
  • Closes the banner

     myBanner.close();
    <igx-banner #banner>
    ...
    </igx-banner>
    <button (click)="banner.close()">Close Banner</button>

    Parameters

    • Optional event: Event

    Returns void

open

  • open(event?: Event): void
  • Opens the banner

     myBanner.open();
    <igx-banner #banner>
    ...
    </igx-banner>
    <button (click)="banner.open()">Open Banner</button>

    Parameters

    • Optional event: Event

    Returns void

toggle

  • toggle(event?: Event): void
  • Toggles the banner

     myBanner.toggle();
    <igx-banner #banner>
    ...
    </igx-banner>
    <button (click)="banner.toggle()">Toggle Banner</button>

    Parameters

    • Optional event: Event

    Returns void