angular / angular/components

feat(Menu): Programmatically open/close menu

Abierto
#31,993 3 comentarios 0 reacciones 0 asignados Ver en GitHub
area: material/menu feature P4
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### Feature Description

**feat(Menu): Programmatically open/close menu**

When the menu is clicked, it opens right away.

I want to handle the click event and programmatically open the menu after doing another operation.

My workaround at present:

```html
List Data

@for (item of data; track item)
{
{{ item.text }}
}

```

```typescript
@ViewChild('dataMenuBtn', { read: ViewContainerRef })
private readonly dataMenuBtnViewContainerRef!: ViewContainerRef;

@ViewChild('dataMenuBtn', { read: ElementRef })
private readonly dataMenuBtnElementRef!: ElementRef;

private dataMenuTrigger!: MatMenuTrigger;
protected data: { text: string }[] = [];

protected async listData(dataMenu: MatMenu, $event: MouseEvent): Promise
{
const menuTrigger = this.dataMenuTrigger ?? (this.dataMenuTrigger = runInInjectionContext(Injector.create({
providers: [
{
provide: ElementRef,
useValue: this.dataMenuBtnElementRef
},
{
provide: ViewContainerRef,
useValue: this.dataMenuBtnViewContainerRef
}
],
parent: this.injector // `Injector` via DI.
}), () => new MatMenuTrigger()));
menuTrigger.menu = dataMenu;
const result = await fetch(`/api/...`);
this.data = await result.json() as typeof this.data;
menuTrigger.openMenu();
}
```

### Use Case

Load data inside menu on click

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza leyendo los puntos de entrada MatMenu y MatMenuTrigger de Angular Material, especialmente el comportamiento existente de openMenu() y cómo se asocia el trigger con un menú. Determina cómo un trigger compatible puede abrir o cerrar el menú después de una operación asíncrona, en lugar de depender de la construcción manual mostrada. Se considera completado cuando los consumidores pueden cargar datos al hacer clic y después abrir o cerrar el menú mediante la API pública de forma programática.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
45/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.