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

[georgetrad]

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:

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- Regular tree node definitions -->
  <mat-tree-node *matTreeNodeDef="let node">
    {{ node.name }}
  </mat-tree-node>

  <!-- NoDataNode template -->
  <ng-template matNoDataNode>
    <div class="no-data-message">No records found</div>
  </ng-template>
</mat-tree>

2. Custom Empty-State Templates

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

Example:

<ng-template matNoDataNode>
  <div class="no-data-message">
    <mat-icon>info</mat-icon>
    <p>No data available. Click <a href="#">here</a> to refresh.</p>
  </div>
</ng-template>