Style and appearance in Angular AppBar component

19 Sep 20254 minutes to read

The AppBar component offers extensive customization options to modify its appearance and integrate seamlessly with your application’s design system. You can customize the AppBar through built-in color modes, CSS classes, and custom styling approaches. Additionally, you have the option to create your own custom theme for all controls using the Theme Studio.

Built-in styling AppBar

The AppBar component provides several built-in CSS classes for common styling scenarios. These classes can be applied individually or combined to achieve the desired appearance.

CSS Class Purpose of Class
.e-appbar To customize the AppBar.
.e-appbar.e-prominent To customize the prominent AppBar.
.e-appbar.e-dense To customize the dense AppBar.
.e-appbar.e-light To customize the light AppBar.
.e-appbar.e-dark To customize the dark AppBar.
.e-appbar.e-primary To customize the dark AppBar.
.e-appbar.e-inherit To customize the inherit AppBar.

Note: You can adjust the prominent AppBar height when incorporating larger titles, images, or text content to ensure proper visual balance.

CssClass

The CssClass property enables AppBar customization through custom CSS classes, allowing you to override default styles and create unique appearances. In the following example, the AppBar background and color are customized using the cssClass property.

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 { Component } from "@angular/core";

@Component({
imports: [ AppBarModule, ButtonModule],


standalone: true,
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary" cssClass="custom-appbar">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

HtmlAttributes

It can be used for additional inline attributes by specifying as inline attributes or by specifying htmlAttributes directive. In the code example below, the aria-label of the AppBar is customized by specifying as attributes.

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 { Component } from "@angular/core";

@Component({
imports: [ AppBarModule, ButtonModule],


standalone: true,
  selector: "app-root",
  template: `<!-- To Render AppBar. -->
    <div class="control-container">
      <ejs-appbar colorMode="Primary" aria-label="appbar">
        <button #defaultButtonMenu ejs-button cssClass="e-inherit" iconCss="e-icons e-home"></button>
      </ejs-appbar>
    </div>`,
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));