Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#32,731 1 comentario 6 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@ok7sai ya está trabajando en esto.

Desde el 1/4/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 5 h
PR fusionados (30 d)
67

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.