angular / angular/components

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

Đang mở
#30,458 0 bình luận 1 reaction 0 người được giao Xem trên GitHub
area: cdk/tree feature P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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


```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách xác định triển khai mat-tree hiện có và directive matNoDataRow được các bảng sử dụng, sau đó xem xét cách các bài kiểm thử của chúng bao phủ các nguồn dữ liệu trống. Xác định hành vi của tree đối với dữ liệu trống và không trống, thêm directive cùng các bài kiểm thử của nó, và xác minh rằng template chỉ được render khi tree không có node nào.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
30/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.