MdPaginatorIntl: Can't load translations asynchronously

[lostllama]

Bug, feature request, or proposal:

Bug (or propsal, depending on how you look at it)

What is the expected behavior?

The paginator should handle string AND Observable so that asynchronous translation libaries can be used.

What is the current behavior?

I've created my own class and assigned it to the MdPaginator._intl property (see #5716 for why I'm doing this).

The problem is that, in the constructor I'm calling some code to get translations. I need to subscribe to wait for the translations, and then update itemsPerPageLabel, nextPageLabel, and previousPageLabel once they have been loaded. Doing so doesn't show the translations on the UI until I click one of the paginator's UI elements (e.g. next button).

Worse still, getRangeLabel can only return a string, so when i need to subscribe to translations here, there's no way to wait for this. I've tried using ngx-translate's "instant" method, but because the translations aren't loaded at the point where getRangeLabel is first called, the untranslated string is returned. Not ideal.

What are the steps to reproduce?

https://plnkr.co/edit/6SD4njsEDNlWDqDnUlfA?p=preview

I've added a class, PaginatorTranslated, at the bottom of the table-pagination-example.ts. I've added methods which mock the translation service I'm using, and mock loading data from the server.

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

Allow the use of translations that aren't hard-coded.

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

Angular 4.0.0
Material 2.0.0-beta.7
Windows 10
TypeScript 2.3.3
Chrome 59

[crisbeto]

Closing as a duplicate of #5738.

[angular-automatic-lock-bot]

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