feat(Menu): Programmatically open/close menu
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia leggendo gli entry point MatMenu e MatMenuTrigger di Angular Material, in particolare il comportamento esistente di openMenu() e il modo in cui il trigger viene associato a un menu. Determina come un trigger supportato possa aprire o chiudere il menu dopo un’operazione asincrona, invece di fare affidamento sulla costruzione manuale mostrata. Il lavoro è completato quando i chiamanti possono caricare i dati al clic e poi aprire o chiudere il menu programmaticamente tramite l’API pubblica.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Tranquilla
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 45/100