npm install @angular/aria

import {Component} from '@angular/core';
import {Toolbar, ToolbarWidget} from '@angular/aria';

@Component({
  selector: 'app-toolbar-example',
  imports: [Toolbar, ToolbarWidget],
  template: `
    <div ngToolbar>
      <button ngToolbarWidget (click)="onNew()">New</button>
      <button ngToolbarWidget (click)="onOpen()">Open</button>
      <button ngToolbarWidget (click)="onSave()">Save</button>
      <div class="separator"></div>
      <button ngToolbarWidget (click)="onCut()">Cut</button>
      <button ngToolbarWidget (click)="onCopy()">Copy</button>
      <button ngToolbarWidget (click)="onPaste()">Paste</button>
    </div>
  `
})
export class ToolbarExample {
  onNew() { console.log('New'); }
  onOpen() { console.log('Open'); }
  onSave() { console.log('Save'); }
  onCut() { console.log('Cut'); }
  onCopy() { console.log('Copy'); }
  onPaste() { console.log('Paste'); }
}

import {Component} from '@angular/core';
import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from '@angular/aria';

@Component({
  selector: 'app-toolbar-groups',
  imports: [Toolbar, ToolbarWidget, ToolbarWidgetGroup],
  template: `
    <div ngToolbar>
      <div ngToolbarWidgetGroup>
        <button ngToolbarWidget>Bold</button>
        <button ngToolbarWidget>Italic</button>
        <button ngToolbarWidget>Underline</button>
      </div>
      
      <div ngToolbarWidgetGroup>
        <button ngToolbarWidget>Align Left</button>
        <button ngToolbarWidget>Align Center</button>
        <button ngToolbarWidget>Align Right</button>
      </div>
      
      <div ngToolbarWidgetGroup>
        <button ngToolbarWidget>Undo</button>
        <button ngToolbarWidget>Redo</button>
      </div>
    </div>
  `
})
export class ToolbarGroupsExample {}

<div ngToolbar orientation="vertical">
  <button ngToolbarWidget>Button 1</button>
  <button ngToolbarWidget>Button 2</button>
  <button ngToolbarWidget>Button 3</button>
</div>

import {Component, signal} from '@angular/core';
import {Toolbar, ToolbarWidget, ToolbarWidgetGroup} from '@angular/aria';

@Component({
  selector: 'app-editor-toolbar',
  imports: [Toolbar, ToolbarWidget, ToolbarWidgetGroup],
  template: `
    <div ngToolbar>
      <div ngToolbarWidgetGroup>
        <button ngToolbarWidget 
          [class.active]="bold()"
          (click)="toggleBold()">
          <strong>B</strong>
        </button>
        <button ngToolbarWidget 
          [class.active]="italic()"
          (click)="toggleItalic()">
          <em>I</em>
        </button>
        <button ngToolbarWidget 
          [class.active]="underline()"
          (click)="toggleUnderline()">
          <u>U</u>
        </button>
      </div>
      
      <div ngToolbarWidgetGroup>
        <select ngToolbarWidget [(ngModel)]="fontSize">
          <option value="12">12pt</option>
          <option value="14">14pt</option>
          <option value="16">16pt</option>
          <option value="18">18pt</option>
        </select>
      </div>
    </div>
  `
})
export class EditorToolbarExample {
  bold = signal(false);
  italic = signal(false);
  underline = signal(false);
  fontSize = '14';
  
  toggleBold() { this.bold.update(v => !v); }
  toggleItalic() { this.italic.update(v => !v); }
  toggleUnderline() { this.underline.update(v => !v); }
}