feat(Menu): Programmatically open/close menu
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
### 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
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par lire les points d’entrée MatMenu et MatMenuTrigger de Angular Material, en particulier le comportement existant de openMenu() et la manière dont le trigger est associé à un menu. Déterminez comment un trigger pris en charge peut ouvrir ou fermer le menu après une opération asynchrone, plutôt que de s’appuyer sur la construction manuelle présentée. Le travail est considéré comme terminé lorsque les appelants peuvent charger des données lors d’un clic, puis ouvrir ou fermer le menu par programmation via l’API publique.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Fonctionnalité
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- Calme
- Clarté
- Plutôt claire
- Accessibilité débutants
- 45/100