MatTable + MatSort example not working properly: Table retrieving data through HTTP

[mhagnumdw]

What is the expected behavior?

Default ordering when loading screen works.

What is the current behavior?

Default sort order is not applied.

What are the steps to reproduce?

1. Go to examples https://v6.material.angular.io/components/table/examples
2. Search for: Table retrieving data through HTTP
3. Wrong result (I'll explain below)

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

Angular Documentation 6.4.7 and 7.2.0, the other versions maybe

Is there anything else we should know?

The default sort order when loading screen is not being applied: matSortActive="created" matSortDirection="asc"

Reason: MatSort becomes initialized only in hook ngAfterViewInit, but its information is being used before ngAfterViewInit due to startWith({}).

Adding a

console.log(`requestUrl: ${requestUrl}`);`

in getRepoIssues you can see that the request made is with sort = undefined and order is empty. Look: requestUrl: https://api.github.com/search/issues?q=repo:angular/material2&sort=undefined&order=&page=1

Solution I propose: remove startWith({}) and observe whether MatSort is initialized by replacing merge(this.sort.sortChange, this.paginator.page) with merge(this.sort.initialized, this.sort.sortChange, this.paginator.page).

startWith({}) is no longer necessary because the startup of MatSort will already trigger the request.

I made a fork from the example quoted above and applied the changes I described here. Follow: https://stackblitz.com/edit/angular-shhprk?file=app/table-http-example.ts

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