feat(COMPONENT): Add matNoDataNode Directive to <mat-tree> for Handling Empty States
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 91
描述
### 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:
```
```
贡献指南
调研方向
首先定位现有的 mat-tree 实现以及表格使用的 matNoDataRow 指令,然后检查它们的测试如何覆盖空数据源。定义树对空数据和非空数据的行为,添加该指令及其测试,并验证只有当树没有节点时才会渲染模板。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend
- Issue 类型
- 功能
- 难度
- 5/5
- 预计耗时
- 一周以上
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 30/100