Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paginator doesn't update visually when changing properties by code #5904

Closed
michelcve opened this issue Jul 20, 2017 · 6 comments
Closed

Paginator doesn't update visually when changing properties by code #5904

michelcve opened this issue Jul 20, 2017 · 6 comments

Comments

@michelcve
Copy link

Bug, feature request, or proposal:

Paginator doesn't update visually when changing by code (e.g. setting length).

What is the expected behavior?

Visually the paginator should update when we change one of the properties by code.

What is the current behavior?

When changing the length property for example, internally the paginator does change it's values. However, visually the component is not updated (old length remains on screen)

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

http://plnkr.co/M4tqI5WjV01fvzzNGkit

What is the use-case or motivation for changing an existing behavior?

I'm using the paginator with a data table, which has it's data loaded asychronously. Only when the response is in, I'll know how many records are available, so I want to update the 'length' property of the paginator at that point through code.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Most recent in plnkr.

Is there anything else we should know?

@willshowell
Copy link
Contributor

Why not bind to the input? http://plnkr.co/edit/v8YKBrRYGftRP7S2orsu?p=preview

The paginator uses OnPush change detection so changes must come through the Input() binding to immediately trigger a rerender.

@michelcve
Copy link
Author

Didn't know that, sorry. Thanks for the explanation!

@willshowell
Copy link
Contributor

@michelcve Same thing goes with the output, in many cases, it'll help simplify your components to bind to the page event rather than subscribe to it.

http://plnkr.co/edit/v8YKBrRYGftRP7S2orsu?p=preview

@andrewseguin
Copy link
Contributor

Note that we will eventually support changing the properties directly, in the case where you did not set an @Input binding on the paginator. #5822

@michelcve
Copy link
Author

Thanks for the extra example @willshowell !

@andrewseguin ah yes, the MarkForCheck, that was indeed what I thought was missing. But willshowell's solution with binding to the @input I missed ;-)

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants