feat(Menu): Programmatically open/close menu
- 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
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