feat(COMPONENT): Add matNoDataNode Directive to <mat-tree> for Handling Empty States
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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 }}
```
2. Custom Empty-State Templates
Developers can define custom templates for empty states, including icons, buttons, or additional instructions.
Example:
```
```
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia individuando l’implementazione esistente di mat-tree e la direttiva matNoDataRow utilizzata dalle tabelle, quindi esamina come i relativi test coprono le origini dati vuote. Definisci il comportamento dell’albero per i dati vuoti e non vuoti, aggiungi la direttiva e i relativi test e verifica che il template venga renderizzato solo quando l’albero non contiene nodi.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 30/100