angular / angular/components

feat(COMPONENT): Add matNoDataNode Directive to <mat-tree> for Handling Empty States

Ouverte
#30,458 0 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
area: cdk/tree feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Feature Description

Currently, Angular Material's component does not provide a built-in way to handle empty states (e.g., when the data source has no nodes). Developers must manually add conditional logic in their templates to display a "No records found" or similar message.

This feature request proposes adding a `matNoDataNode `directive to , similar to the `matNoDataRow `directive available for tables. The `matNoDataNode `directive would allow developers to define a template that is displayed when the tree's data source is empty.

Proposed Implementation:

- A new directive, `matNoDataNode`, that conditionally renders a template when the tree's data source is empty.

- Seamless integration with the existing mat-tree API, ensuring consistency with other Angular Material components.

### Use Case

he `matNoDataNode `directive would enable the following use cases:

1. Displaying a "No Records Found" Message

When a tree has no data, developers can use `matNoDataNode `to display a user-friendly message, such as "No records found" or "No data available."

Example:

```



{{ node.name }}



No records found

```

2. Custom Empty-State Templates

Developers can define custom templates for empty states, including icons, buttons, or additional instructions.

Example:

```


info

No data available. Click here to refresh.


```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par localiser l’implémentation existante de mat-tree et la directive matNoDataRow utilisée par les tableaux, puis examinez comment leurs tests couvrent les sources de données vides. Définissez le comportement de l’arbre pour les données vides et non vides, ajoutez la directive et ses tests, et vérifiez que le template ne s’affiche que lorsque l’arbre ne contient aucun nœud.

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é
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
30/100

Recevez les nouvelles issues par e-mail

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