angular / angular/components

schematic(table): using generated DataSource with async data source

Open
#15,791 8 comments 0 reactions 0 assignees View on GitHub
area: material/table P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What is the expected behavior?

Documentation for how to **get async data** `DataSource connect()` from (`http.get.....().subscribe()....`)

I don't ask for example with static data nor old syntax, but how to use with actual schematic for Table and his DataSource

#### What is the current behavior?
DataSource extension is generated like this:
```ts
connect(): Observable {
// Combine everything that affects the rendered data into one update
// stream for the data-table to consume.

const dataMutations = [
observableOf(this.data),
this.paginator.page,
this.sort.sortChange
];

// Set the paginator's length
this.paginator.length = this.data.length;

return merge(...dataMutations).pipe(map(() => {
return this.getPagedData(this.getSortedData([...this.data]));
}));

}
```

No documentation, where and how to call `http.get`....... for getting async data for `connect()` method.

#### What are the steps to reproduce?
Providing a StackBlitz reproduction is the *best* way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

Try to use material table schematic and fill `connect()` not with static data but async call like `http.get`...

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Actual angular, actual material 7.3.7, needed typescript

#### Is there anything else we should know?

Contributor guide

Open the contributing guide

Research direction

Start with the table schematic's generated DataSource connect() method and the StackBlitz reproduction linked in the issue. Compare the static observableOf(this.data) flow with the requested http.get async-data case; done means the schematic's current async usage is documented clearly with a verifiable example.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.