angular / angular/components

feat(Menu): Programmatically open/close menu

Ouverte
#31,993 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: material/menu feature P4
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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.