Angular Primitives

Primitives

The Toolbar primitive is a container for grouping related controls.

import { Component } from "@angular/core";
import { NgIcon, provideIcons } from "@ng-icons/core";
import {
  heroBars3,
  heroBars3BottomLeft,
  heroBars3BottomRight,
  heroCog6Tooth,
  heroDocument,
  heroFolder,
} from "@ng-icons/heroicons/outline";
import { NgpButton } from "ng-primitives/button";
import {
  NgpRovingFocusGroup,
  NgpRovingFocusItem,
} from "ng-primitives/roving-focus";
import { NgpSeparator } from "ng-primitives/separator";
import { NgpToggleGroup, NgpToggleGroupItem } from "ng-primitives/toggle-group";
import { NgpToolbar } from "ng-primitives/toolbar";

@Component({
  selector: "app-toolbar",
  imports: [
    NgpRovingFocusGroup,
    NgpRovingFocusItem,
    NgIcon,
    NgpButton,
    NgpToolbar,
    NgpToggleGroup,
    NgpToggleGroupItem,
    NgpSeparator,
  ],
  providers: [
    provideIcons({
      heroDocument,
      heroFolder,
      heroBars3BottomLeft,
      heroBars3,
      heroBars3BottomRight,
      heroCog6Tooth,
    }),
  ],
  styles: `
    [ngpToolbar] {
      display: flex;
      column-gap: 0.25rem;
      align-items: center;
      border-radius: 0.375rem;
      background-color: var(--ngp-background);
      box-shadow: var(--ngp-button-shadow);
      padding: 0.25rem;
    }

    [ngpButton] {
      display: flex;
      width: 2rem;
      height: 2rem;
      align-items: center;
      justify-content: center;
      border-radius: 0.25rem;
      border: 1px solid transparent;
      background: transparent;
      outline: none;
      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
      box-sizing: border-box;
      color: var(--ngp-text-primary);
    }

    [ngpButton][data-hover] {
      background-color: var(--ngp-background-hover);
      border-color: var(--ngp-border);
    }

    [ngpButton][data-focus-visible] {
      outline: 2px solid var(--ngp-focus-ring);
    }

    [ngpButton][data-press] {
      background-color: var(--ngp-background-active);
    }

    [ngpButton][data-selected] {
      background-color: var(--ngp-background-inverse);
      color: var(--ngp-text-inverse);
    }

    [ngpToggleGroup] {
      display: flex;
      column-gap: 0.25rem;
    }

    ng-icon {
      font-size: 1.125rem;
    }

    .divider {
      width: 1px;
      height: 1.5rem;
      background-color: var(--ngp-border);
      margin: 0 0.25rem;
    }
  `,
  template: `
    <div ngpToolbar>
      <button type="button" ngpButton ngpRovingFocusItem>
        <ng-icon name="heroDocument" />
      </button>
      <button type="button" ngpButton ngpRovingFocusItem>
        <ng-icon name="heroFolder" />
      </button>

      <div class="divider" ngpSeparator></div>

      <div ngpToggleGroup aria-label="Text alignment">
        <button
          type="button"
          ngpButton
          ngpToggleGroupItem
          ngpToggleGroupItemValue="left"
          aria-label="Align left"
        >
          <ng-icon name="heroBars3BottomLeft" />
        </button>

        <button
          type="button"
          ngpButton
          ngpToggleGroupItem
          ngpToggleGroupItemValue="center"
          aria-label="Align center"
        >
          <ng-icon name="heroBars3" />
        </button>

        <button
          type="button"
          ngpButton
          ngpToggleGroupItem
          ngpToggleGroupItemValue="right"
          aria-label="Align right"
        >
          <ng-icon name="heroBars3BottomRight" />
        </button>
      </div>

      <div class="divider" ngpSeparator></div>

      <button type="button" ngpButton ngpRovingFocusItem>
        <ng-icon name="heroCog6Tooth" />
      </button>
    </div>
  `,
})
export default class ToolbarExample {}

Import

Import the Toolbar primitives from ng-primitives/toolbar.

import { NgpToolbar } from 'ng-primitives/toolbar';

Usage

Assemble the toolbar directives in your template.

<div ngpToolbar>
  <!-- Toolbar content -->
</div>

Reusable Component

Create a reusable component that uses the NgpToolbar directive.

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { heroCog6Tooth, heroDocument, heroFolder } from '@ng-icons/heroicons/outline';
import { Toolbar } from './toolbar';
import { ToolbarButton } from './toolbar-button';

@Component({
  selector: 'app-root',
  imports: [Toolbar, ToolbarButton, NgIcon],
  providers: [
    provideIcons({
      heroDocument,
      heroFolder,
      heroCog6Tooth,
    }),
  ],
  template: `
    <app-toolbar>
      <button app-toolbar-button aria-label="New Document">
        <ng-icon name="heroDocument" />
      </button>
      <button app-toolbar-button aria-label="New Folder">
        <ng-icon name="heroFolder" />
      </button>
      <button app-toolbar-button aria-label="Settings">
        <ng-icon name="heroCog6Tooth" />
      </button>
    </app-toolbar>
  `,
})
export default class App {}

Schematics

Generate a reusable toolbar component using the Angular CLI.

ng g ng-primitives:primitive toolbar

Options

path: The path at which to create the component file.
prefix: The prefix to apply to the generated component selector.
componentSuffix: The suffix to apply to the generated component class name.
fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

The following directives are available to import from the ng-primitives/toolbar package:

NgpToolbar

Selector: [ngpToolbar]
Exported As: ngpToolbar

ngpToolbarOrientation

NgpOrientation

The orientation of the toolbar.

Data Attributes

The following data attributes are applied to the ngpToolbar directive:

Attribute	Description	Value
`data-orientation`	The orientation of the toolbar.	`horizontal` \| `vertical`

Accessibility

Adheres to the WAI-ARIA Toolbar Design Pattern.

Keyboard Interaction

Tab - Moves focus to the first interactive element in the toolbar.
Arrow Down - Moves focus to the next interactive element (vertical orientation).
Arrow Up - Moves focus to the previous interactive element (vertical orientation).
Arrow Right - Moves focus to the next interactive element (horizontal orientation).
Arrow Left - Moves focus to the previous interactive element (horizontal orientation).
Home - Moves focus to the first interactive element in the toolbar.
End - Moves focus to the last interactive element in the toolbar.

Getting Started