angular / angular/components

feat(MatPaginator): Allow custom content in paginator

Open
#22,611 4 comments 5 reactions 0 assignees View on GitHub
area: material/paginator feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

Hey there,

#### Feature Description

Add a ng-content tag in the left part of the paginator for custom content. Users could then add additional information like this:

```

Stuff displayed on the left side!

```

#### Use Case

The paginator, depending on the use case, can get quite wide. All controls are aligned to the right side. On the left side, there is a lot of space, which might be used for other information. E.g, imagine a table that lets the user select rows. In the bottom left, one could show the number of selected items - something like this:

![image](https://user-images.githubusercontent.com/39462297/116786103-49392000-aa9d-11eb-9299-10946dc9fdcf.png)

Contributor guide

Open the contributing guide

Research direction

Start at the MatPaginator component entry point and inspect how its template lays out the left and right sections. Add support for projected custom content on the left, using the example in the issue as the usage target, and verify that the existing paginator controls continue to align on the right.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.