angular / angular/components

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

Open
#30,458 0 comments 1 reaction 0 assignees View on GitHub
area: cdk/tree feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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.


```

Contributor guide

Open the contributing guide

Research direction

Start by locating the existing mat-tree implementation and the matNoDataRow directive used by tables, then review how their tests cover empty data sources. Define the tree behavior for empty and nonempty data, add the directive and its tests, and verify that the template renders only when the tree has no nodes.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.