angular / angular/components

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

Offen
#30,458 0 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/tree feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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.


```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, die vorhandene mat-tree-Implementierung und die von Tabellen verwendete matNoDataRow-Direktive zu finden, und überprüfe anschließend, wie deren Tests leere Datenquellen abdecken. Lege das Verhalten des Baums für leere und nichtleere Daten fest, füge die Direktiv und ihre Tests hinzu und verifiziere, dass das Template nur gerendert wird, wenn der Baum keine Knoten enthält.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
30/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.