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:

<igx-banner #banner>
  Our privacy settings have changed.
 <igx-banner-actions>
     <button type="button" igxButton="contained">Read More</button>
     <button type="button" igxButton="contained">Accept and Continue</button>
 </igx-banner-actions>
</igx-banner>

Constructors

Section titled "Constructors"

IgxBannerComponent

new IgxBannerComponent(): IgxBannerComponent

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:248

Returns IgxBannerComponent

Properties

Section titled "Properties"

closed

Section titled "closed"

Fires after the banner hides

public handleClosed(event) {
 ...
}
<igx-banner (closed)="handleClosed($event)"></igx-banner>
closed: EventEmitter<BannerEventArgs>

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:106

closing

Section titled "closing"

Fires before the banner hides

public handleClosing(event) {
 ...
}
<igx-banner (closing)="handleClosing($event)"></igx-banner>
closing: EventEmitter<BannerCancelEventArgs>

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:120

cssClass

Section titled "cssClass" 
cssClass: string = 'igx-banner-host'

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:224

elementRef

Section titled "elementRef" 
elementRef: ElementRef<HTMLElement>

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:58

opened

Section titled "opened"

Fires after the banner shows up

public handleOpened(event) {
 ...
}
<igx-banner (opened)="handleOpened($event)"></igx-banner>
opened: EventEmitter<BannerEventArgs>

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:78

opening

Section titled "opening"

Fires before the banner shows up

public handleOpening(event) {
 ...
}
<igx-banner (opening)="handleOpening($event)"></igx-banner>
opening: EventEmitter<BannerCancelEventArgs>

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:92

animationSettings

Section titled "animationSettings" 
animationSettings: ToggleAnimationSettings

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:135, projects/igniteui-angular/banner/src/banner/banner.component.ts:146

expanded

Section titled "expanded" 
expanded: boolean

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:183, projects/igniteui-angular/banner/src/banner/banner.component.ts:187

resourceStrings

Section titled "resourceStrings" 
resourceStrings: IBannerResourceStrings

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:157, projects/igniteui-angular/banner/src/banner/banner.component.ts:161

Accessors

Section titled "Accessors"

collapsed

Section titled "collapsed"

Gets whether the banner is collapsed.

const isCollapsed: boolean = banner.collapsed;
get collapsed(): boolean

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:209

Returns boolean

element

Section titled "element"

Returns the native element of the banner component

const myBannerElement: HTMLElement = banner.element;
get element(): HTMLElement

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:219

Returns HTMLElement

Methods

Section titled "Methods"

close

Section titled "close"

Closes the banner

myBanner.close();
<igx-banner #banner>
...
</igx-banner>
<button type="button" (click)="banner.close()">Close Banner</button>
close(event: Event): void

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:298

Parameters

  • event: Event

Returns void

open

Section titled "open"

Opens the banner

myBanner.open();
<igx-banner #banner>
...
</igx-banner>
<button type="button" (click)="banner.open()">Open Banner</button>
open(event: Event): void

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:268

Parameters

  • event: Event

Returns void

toggle

Section titled "toggle"

Toggles the banner

myBanner.toggle();
<igx-banner #banner>
...
</igx-banner>
<button type="button" (click)="banner.toggle()">Toggle Banner</button>
toggle(event: Event): void

Defined in projects/igniteui-angular/banner/src/banner/banner.component.ts:328

Parameters

  • event: Event

Returns void