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 IgxNavbar 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:100
actionButtonIcon
Section titled "actionButtonIcon"Sets the icon of the IgxNavbarComponent.
<igx-navbar [title]="currentView" actionButtonIcon="arrow_back"></igx-navbar> actionButtonIcon: string Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:77
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:69
title
Section titled "title"Sets the title of the IgxNavbarComponent.
<igx-navbar title="Sample App" actionButtonIcon="menu"> title: string Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:85
titleId
Section titled "titleId"Sets the titleId of the IgxNavbarComponent. 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:109
isActionButtonVisible
Section titled "isActionButtonVisible"isActionButtonVisible: boolean Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:131, projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:146
Accessors
Section titled "Accessors"isTitleContentVisible
Section titled "isTitleContentVisible"get isTitleContentVisible(): boolean Defined in projects/igniteui-angular/navbar/src/navbar/navbar.component.ts:153
Returns boolean