Example of Default Functionalities in Angular AppBar Component

This sample demonstrates the default functionalities of the Angular AppBar.

Simple AppBar

Angular AppBar

Prominent

Angular AppBar Component with Prominent mode

Dense

Angular AppBar

Description

The >Angular AppBar is a navigation component that displays information and actions related to the current view horizontally.


In this demo, the available types of Angular AppBar are showcased. They are regular, prominent, and dense, and can be set using the Mode property.

Regular - The AppBar is displayed with the default height.

Prominent - Prominent top app bars are longer than regular, and can be used for larger titles, images, or texts.

Dense - The AppBar's layout is denser to accommodate all the AppBar content.

In this demo, Button component's styles are inherited from the AppBar component using the e-inherit CSS class.