feat(Menu): Programmatically open/close menu
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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
Beitragsleitfaden
Rechercherichtung
Beginne damit, die Angular Material MatMenu- und MatMenuTrigger-Einstiegspunkte zu lesen, insbesondere das bestehende openMenu()-Verhalten und die Zuordnung des Triggers zu einem Menü. Ermittle, wie ein unterstützter Trigger das Menü nach einem asynchronen Vorgang öffnen oder schließen kann, anstatt sich auf die gezeigte manuelle Konstruktion zu stützen. Als erledigt gilt die Aufgabe, wenn Aufrufer beim Klick Daten laden und anschließend das Menü über die öffentliche API programmgesteuert öffnen oder schließen können.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100