Design in Angular Appbar component

28 Sep 202320 minutes to read

Spacer

Spacer is used to provide spacing between the AppBar contents which gives additional space to the content layout.

The following example depicts the code to provide spacing between the home and pan buttons in the AppBar:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonHome ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonCut ejs-button cssClass="e-inherit" iconCss="e-icons e-cut"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonPan ejs-button cssClass="e-inherit" iconCss="e-icons e-pan"></button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppBarModule } from '@syncfusion/ej2-angular-navigations';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, AppBarModule, ButtonModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Separator

Separator shows a vertical line to visually group or separate the AppBar contents.

The following example depicts the code to provide a vertical line between a group of buttons in the AppBar.

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonCut ejs-button cssClass="e-inherit" iconCss="e-icons e-cut"></button>
        <button #defaultButtonCopy ejs-button cssClass="e-inherit" iconCss="e-icons e-copy"></button>
        <button #defaultButtonPaste ejs-button cssClass="e-inherit" iconCss="e-icons e-paste"></button>
        <div class="e-appbar-separator"></div>
        <button #defaultButtonBold ejs-button cssClass="e-inherit" iconCss="e-icons e-bold"></button>
        <button #defaultButtonUnderline ejs-button cssClass="e-inherit" iconCss="e-icons e-underline"></button>
        <button #defaultButtonItalic ejs-button cssClass="e-inherit" iconCss="e-icons e-italic"></button>
        <div class="e-appbar-separator"></div>
        <button #defaultButtonAlignLeft ejs-button cssClass="e-inherit" iconCss="e-icons e-align-left"></button>
        <button #defaultButtonAlignRight ejs-button cssClass="e-inherit" iconCss="e-icons e-align-right"></button>
        <button #defaultButtonAlignCenter ejs-button cssClass="e-inherit" iconCss="e-icons e-align-center"></button>
        <button #defaultButtonJustify ejs-button cssClass="e-inherit" iconCss="e-icons e-justify"></button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppBarModule } from '@syncfusion/ej2-angular-navigations';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, AppBarModule, ButtonModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Media Query

Media Query is used to adjusting the AppBar for different screen sizes. Resize the screen to observe the responsive layout of the AppBar.

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <button #defaultButtonHome ejs-button cssClass="e-inherit">Home</button>
        <button #defaultButtonAbout ejs-button cssClass="e-inherit">About</button>
        <button #defaultButtonProducts ejs-button cssClass="e-inherit">Products</button>
        <button #defaultButtonContacts ejs-button cssClass="e-inherit">Contacts</button>
        <div class="e-appbar-spacer"></div>
        <div class="e-appbar-separator"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">Login</button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppBarModule } from '@syncfusion/ej2-angular-navigations';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, AppBarModule, ButtonModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Designing AppBar with Menu

AppBar is rendered with a Menu component in its AppBar header area. Menu component’s styles are inherited from the AppBar component using the e-inherit CSS class.

app.component.ts

import { Component } from "@angular/core";
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';

@Component({
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <ejs-menu #defaultMenuCompany cssClass="e-inherit" [items]='companyMenuItems'></ejs-menu>
        <ejs-menu #defaultMenuProducts cssClass="e-inherit" [items]='productMenuItems'></ejs-menu>
        <ejs-menu #defaultMenuAbout cssClass="e-inherit" [items]='aboutMenuItems'></ejs-menu>
        <ejs-menu #defaultMenuCarrers cssClass="e-inherit" [items]='carrerMenuItems'></ejs-menu>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">Login</button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {
  public companyMenuItems: MenuItemModel[] = [
    {
        text : 'Company',
        items: [
            { text: 'About Us' },
            { text: 'Customers' },
            { text: 'Blog' },
            { text: 'Careers' }
        ]
    }
  ];
  public productMenuItems: MenuItemModel[] = [
    {
        text : 'Products',
        items: [
            { text: 'Developer' },
            { text: 'Analytics' },
            { text: 'Reporting' },
            { text: 'Help Desk' }
        ]
    }
  ];
  public aboutMenuItems: MenuItemModel[] = [
    {
        text : 'About Us'
    }
  ];
  public carrerMenuItems: MenuItemModel[] = [
    {
        text : 'Carrers'
    }
  ];
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppBarModule, MenuModule } from '@syncfusion/ej2-angular-navigations';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, AppBarModule, ButtonModule, MenuModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Designing AppBar with Buttons

The AppBar is rendered with a Button and DropDownButton component in its AppBar header area. Button and DropDownButton components’ styles are inherited from the AppBar component using the e-inherit CSS class.

app.component.ts

import { Component } from "@angular/core";
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu"></button>
        <button #defaultDropDownButtonProduct ejs-dropdownbutton cssClass="e-inherit" [items]='productDropDownButtonItems' content="Products"></button>
        <div class="e-appbar-spacer"></div>
        <button #defaultButtonLogin ejs-button cssClass="e-inherit">Login</button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {
  public productDropDownButtonItems: ItemModel[] = [
    { text: 'Developer' },
    { text: 'Analytics' },
    { text: 'Reporting' },
    { text: 'E-Signature' },
    { text: 'Help Desk' }
  ];
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppBarModule } from '@syncfusion/ej2-angular-navigations';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, AppBarModule, ButtonModule, DropDownButtonModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Designing AppBar with SideBar

The AppBar is rendered with the SideBar component below the AppBar. Click on the menu icon to expand/collapse the Sidebar. In the following sample, the toggle method has been used to show or hide the Sidebar on the AppBar button click.

app.component.ts

import { Component, ViewChild } from "@angular/core";
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-section" id="reswrapper">
        <div>
            <ejs-appbar>
                <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-menu" (click)="toggle()"></button>
                <div class="e-folder">
                    <div class="e-folder-name">Navigation Pane</div>
                </div>
            </ejs-appbar>
        </div>
        <ejs-sidebar id="sideTree" class="sidebar-treeview" #sidebarTreeviewInstance [width]="width" [target]="target" [mediaQuery]="mediaQuery" [isOpen]="true">
            <div class='main-menu'>
                <div class="table-content">
                    <ejs-textbox id="resSearch" placeholder="Search..."></ejs-textbox>
                    <p class="main-menu-header">TABLE OF CONTENTS</p>
                </div>
                <div>
                    <ejs-treeview id='mainTree' cssClass="main-treeview" [fields]="fields" expandOn='Click'>
                </ejs-treeview>
                </div>
            </div>
        </ejs-sidebar>
        <div class="main-sidebar-content" id="main-text">
            <div class="sidebar-content">
            <div class="sidebar-heading"> Responsive Sidebar with Treeview</div>
                <p class="paragraph-content">
                    This is a graphical aid for visualising and categorising the site, in the style of an expandable and
                    collapsable treeview component.
                    It auto-expands to display the node(s), if any, corresponding to the currently viewed title,
                    highlighting that node(s)
                    and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical
                    browsers),
                    falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered
                    so that
                    unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of
                    the treeview persists across page views in most situations.
                </p>
            </div>
        </div>
    </div>`,
})
export class AppComponent {
  @ViewChild('sidebarTreeviewInstance')
  public sidebarTreeviewInstance?: SidebarComponent;
  public data: { [key: string]: Object }[] = [
    {
        nodeId: '01', nodeText: 'Installation',
    },
    {
        nodeId: '02', nodeText: 'Deployment',
    },
    {
        nodeId: '03', nodeText: 'Quick Start',
    },
    {
        nodeId: '04', nodeText: 'Components',
        nodeChild: [
            { nodeId: '04-01', nodeText: 'Calendar' },
            { nodeId: '04-02', nodeText: 'DatePicker' },
            { nodeId: '04-03', nodeText: 'DateTimePicker' },
            { nodeId: '04-04', nodeText: 'DateRangePicker' },
            { nodeId: '04-05', nodeText: 'TimePicker' },
            { nodeId: '04-06', nodeText: 'SideBar' }
        ]
    }
  ];
  public width: string = '220px';
  public target: string = '.main-sidebar-content';
  public mediaQuery: string = '(min-width: 600px)';
  public fields: object = { dataSource: this.data, id: 'nodeId', text: 'nodeText', child: 'nodeChild' };
  toggle() {
    (this.sidebarTreeviewInstance as SidebarComponent).toggle();
  };
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppBarModule, SidebarModule, TreeViewModule } from '@syncfusion/ej2-angular-navigations';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, AppBarModule, ButtonModule, SidebarModule, TreeViewModule, TextBoxModule ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);