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:250

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:108

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:122

cssClass

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

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

elementRef

Section titled "elementRef" 
elementRef: ElementRef<HTMLElement>

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

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:80

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:94

Accessors

Section titled "Accessors"

animationSettings

Section titled "animationSettings"

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

let currentAnimations: ToggleAnimationSettings = banner.animationSettings
get animationSettings(): ToggleAnimationSettings

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

Returns ToggleAnimationSettings

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

import { slideInLeft, slideOutRight } from 'igniteui-angular';
...
banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };
set animationSettings(settings: ToggleAnimationSettings): void

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

Parameters

  • settings: ToggleAnimationSettings

Returns void

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:211

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:221

Returns HTMLElement

expanded

Section titled "expanded"

Gets/Sets whether the banner is expanded (visible) or collapsed (hidden). Defaults to false. Setting to true opens the banner, while false closes it.

 
get expanded(): boolean

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

Example

// Expand the banner
banner.expanded = true;

Returns boolean 

set expanded(value: boolean): void

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

Parameters

  • value: boolean

Returns void

resourceStrings

Section titled "resourceStrings"

Gets/Sets the resource strings.

 
set resourceStrings(value: IBannerResourceStrings): void

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

Parameters

Returns void

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:300

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:270

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:330

Parameters

  • event: Event

Returns void