constructor

• new IgxBannerComponent(elementRef: ElementRef<HTMLElement>): IgxBannerComponent

  Parameters

  • elementRef: ElementRef<HTMLElement>

  Returns IgxBannerComponent

closed

public handleClosed(event) {
 ...
}
Copy

<igx-banner (closed)="handleClosed($event)"></igx-banner>
Copy

closing

public handleClosing(event) {
 ...
}
Copy

<igx-banner (closing)="handleClosing($event)"></igx-banner>
Copy

cssClass

elementRef

opened

public handleOpened(event) {
 ...
}
Copy

<igx-banner (opened)="handleOpened($event)"></igx-banner>
Copy

opening

public handleOpening(event) {
 ...
}
Copy

<igx-banner (opening)="handleOpening($event)"></igx-banner>
Copy

animationSettings

• get animationSettings(): ToggleAnimationSettings

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

  let currentAnimations: ToggleAnimationSettings = banner.animationSettings
  Copy

  Returns ToggleAnimationSettings

• set animationSettings(settings: ToggleAnimationSettings): void

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

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

  Parameters

  • settings: ToggleAnimationSettings

  Returns void

collapsed

• get collapsed(): boolean

  Gets whether the banner is collapsed.

  const isCollapsed: boolean = banner.collapsed;
  Copy

  Returns boolean

element

• get element(): HTMLElement

  Returns the native element of the banner component

   const myBannerElement: HTMLElement = banner.element;
  Copy

  Returns HTMLElement

expanded

• get expanded(): boolean

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

  Example

  // Expand the banner
  banner.expanded = true;
  Copy

  Example

  // Collapse the banner
  banner.expanded = false;
  Copy

  Example

  // Check if the banner is expanded
  const isExpanded = banner.expanded;
  Copy

  Returns boolean

• set expanded(value: boolean): void

  Parameters

  • value: boolean

  Returns void

resourceStrings

• get resourceStrings(): IBannerResourceStrings

  Returns IBannerResourceStrings

• set resourceStrings(value: IBannerResourceStrings): void

  Gets/Sets the resource strings.

  Remarks

  By default it uses EN resources.

  Parameters

  • value: IBannerResourceStrings

  Returns void

close

• close(event?: Event): void

  Closes the banner

   myBanner.close();
  Copy

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

  Parameters

  • event: Event

  Returns void

open

• open(event?: Event): void

  Opens the banner

   myBanner.open();
  Copy

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

  Parameters

  • event: Event

  Returns void

toggle

• toggle(event?: Event): void

  Toggles the banner

   myBanner.toggle();
  Copy

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

  Parameters

  • event: Event

  Returns void