Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

feat(aria/menu): Add possibility to create a shared menu component from aria/menu

Offen
  • Stimmt etwas nicht?
#32,731 1 Kommentar 6 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@ok7sai arbeitet bereits daran.

Seit 01.4.2026.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

area: aria/menu feature P3
Feature Description

When building a menu using aria/menu you have to have the following structure:

  1. an for cdkConnectedOverlay
  2. a container element with ngMenu
  3. another for ngMenuContent
  4. only then the actual ngMenuItem elements

This results in 4 structural levels that need to be repeated every time you need a new menu.

I attempted to create a shared menu component (similar to Angular Material’s MatMenu) in order to reduce this complexity to 2 levels and enable an API like:

<button appMenuTrigger #appMenuTrigger="appMenuTrigger"  [appMenu]="appMenu.formatMenu()">
  Open Menu
</button>

<app-menu #appMenu [appMenuTrigger]="appMenuTrigger">
  <app-menu-item value="Mark as read">
    <span class="icon material-symbols-outlined" aria-hidden="true">mark_email_read</span>
    <span class="label">Mark as read</span>
  </app-menu-item>

  <app-menu-item value="Snooze">
    <span class="icon material-symbols-outlined" aria-hidden="true">snooze</span>
    <span class="label">Snooze</span>
  </app-menu-item>
</app-menu>

Internally, app-menu wraps Menu and MenuContent:

@Component({
  selector: 'app-menu',
  imports: [OverlayModule, Menu, MenuContent],
  template: `
    <ng-template
      [cdkConnectedOverlayOpen]="appMenuTrigger().menuTrigger.expanded()"
      [cdkConnectedOverlay]="{ origin: appMenuTrigger().nativeElement, usePopover: 'inline' }"
      [cdkConnectedOverlayPositions]="overlayPositions"
      cdkAttachPopoverAsChild>

      <div ngMenu class="menu" #formatMenu="ngMenu">
        <ng-template ngMenuContent>
          <ng-content />
        </ng-template>
      </div>
    </ng-template>
  `
})
export class AppMenu {
  appMenuTrigger = input.required<AppMenuTrigger>();
  formatMenu = viewChild<Menu<string>>('formatMenu');
  overlayPositions: ConnectedPosition[] = [{originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4}];
}

and menu items are wrapped like this:

@Component({
  selector: 'app-menu-item',
  template: '<ng-content />',
  hostDirectives: [{ directive: MenuItem, inputs: ['value: value'] }]
})
export class AppMenuItem {}

Problem
With this approach, accessibility breaks (keyboard navigation no longer works correctly). This seems to happen because Menu cannot properly register MenuItem children when they are content projected.

Proposed enhancement
Expose a public API on Menu that allows the menu to "refresh" in order to register the items when they are content projected.

Use Case

No response

Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 7 Std.
Gemergte PRs (30 T.)
69

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus angular/components

Alle Issues in angular/components

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.