angular / angular/components

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

Aperta
#30,458 0 commenti 1 reazione 0 assegnatari Vedi su GitHub
area: cdk/tree feature P3
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 }}



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.


```

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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.