Ignite UI for Angular Navbar - Documentation

The Ignite UI Navbar is most commonly used to provide an app header with a hamburger menu and navigation state such as a "Go Back" button. It also supports other actions represented by icons.

Example:

<igx-navbar title="Sample App" actionButtonIcon="menu">
  <igx-icon>search</igx-icon>
  <igx-icon>favorite</igx-icon>
  <igx-icon>more_vert</igx-icon>
</igx-navbar>

Constructors

Section titled "Constructors"

IgxNavbarComponent 

new IgxNavbarComponent(): IgxNavbarComponent

Returns IgxNavbarComponent

Properties

Section titled "Properties"

action

Section titled "action"

The event that will be thrown when the action is executed, provides reference to the navbar component as argument

public actionExc(event){
    alert("Action Execute!");
}
 //..
<igx-navbar (action)="actionExc($event)" title="Sample App" actionButtonIcon="menu">
action: EventEmitter<IgxNavbarComponent>

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:102

actionButtonIcon

Section titled "actionButtonIcon"

Sets the icon of the navbar.

<igx-navbar [title]="currentView" actionButtonIcon="arrow_back"></igx-navbar>
actionButtonIcon: string

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:79

id

Section titled "id"

Sets the value of the id attribute. If not provided it will be automatically generated.

<igx-navbar [id]="'igx-navbar-12'" title="Sample App" actionButtonIcon="menu">
id: string

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:71

title

Section titled "title"

Sets the title of the navbar.

<igx-navbar title="Sample App" actionButtonIcon="menu">
title: string

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:87

titleId

Section titled "titleId"

Sets the titleId of the navbar. If not set it will be automatically generated.

<igx-navbar [titleId]="'igx-navbar-7'" title="Sample App" actionButtonIcon="menu">
titleId: string

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:111

Accessors

Section titled "Accessors"

isActionButtonVisible

Section titled "isActionButtonVisible"

Returns whether the navbar action button is visible, true/false.

@ViewChild("MyChild")
public navBar: IgxNavbarComponent;
ngAfterViewInit(){
    let actionButtonVisibile = this.navBar.isActionButtonVisible;
}
get isActionButtonVisible(): boolean

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

Returns boolean

Sets whether the action button of the navbar is visible.

<igx-navbar [title]="currentView" [isActionButtonVisible]="'false'"></igx-navbar>
set isActionButtonVisible(value: boolean): void

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:133

Parameters

  • value: boolean

Returns void

isTitleContentVisible

Section titled "isTitleContentVisible" 
get isTitleContentVisible(): boolean

Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:155

Returns boolean