type of the trigger payload to be used in the underlying fetch function, for example a form output
type of the output data for the table. This must match MatTable's generic type
Creates a new instance of a MatTableFetchMediator and calls its ngOnInit function.
Reference to the MatTable
Reference to the MatPaginator
Reference to the MatSort
The data from the MediatorData object. It only contains the received entities and will be fed into the table.
A subject for cleanups. Will be called and completed by the ngOnDestroy method.
The subject that receives any error from the fetching process.
The BehaviorSubject indicating the loading status.
The raw MediatorData observable, resulting from the createDataFetch method.
The total result count, taken from the MediatorData object.
A frozen MediatorConfig, put together in the constructor.
By default the MatTableMediator.DEFAULT_CONFIG values will be used.
An observable that emits, whenever the page is reset.
To change the behaviour overwrite the createOnPageReset method.
Reference to the MatPaginator
Reference to the MatSort
Reference to the MatTable
An observable of the data, which gets fed into the table. The mediator takes care of feeding the table. You can use this property for additional actions.
An observable with the latest error. It does NOT return undefined, when a fetch was successful.
An observable which indicates loading. by default loading starts when the fetch function gets triggered and ends when data was received and just before the table and paginator gets fed.
An observable which only emits if loading has started. You may use this to hide an error message or perform other actions.
An observable which only emits if no results were found.
It's a filter for the resultsLength$ property with x <= 0.
Returns an observable which only emits if results were found.
It's a filter for the resultsLength$ property with x > 0.
safely returns this.paginator.page.pipe(startWith({})) or of(undefined), if MatPaginator object wasn't provided
safely returns this.paginator.pageIndex or undefined, if MatPaginator object wasn't provided
safely returns this.paginator.pageSize or undefined, if MatPaginator object wasn't provided
safely returns this.sort.active or undefined, if MatSort object wasn't provided
safely returns this.sort.sortChange.pipe(startWith({})) or of(undefined), if MatSort object wasn't provided
safely returns this.sort.direction or undefined, if MatSort object wasn't provided
An observable which emits the total count of results that are available on the server. The mediator takes care of feeding the paginator. You can use this property for additional actions.
the observable whose latest value always gets fed into the fetch function If you don't need this please use the following example in your class
This is the mediator's core function and setups the logic. It merges the relevant observables, starts the fetch function and maps the values to fit the mediator's needs.
This function creates an internal observable to reset the paginator.
By default it merges sortChange$ and the trigger$ observable.
The function which is used for communicating with the API.
the latest trigger payload
the currently selected column
"asc", "desc" or ""
the current page the user is on
the given page size by the user
This function handles any errors that occur while fetching the data. You can either safely handle the error and return replacement data or rethrow the error. Throwing an error will complete the observable and would have to be started again by calling #initDataFetch
The thrown error
The replacement data as an observable (e.g. return of({ total: -1, data: [] });)
Handler that gets called whenever the onPageReset$ observable emits.
the result of the onPageReset$ observable
This function gets called every time new data was fetched. It's responsible for feeding the data into the table and paginator. It also controls the subjects for the properties like data$, resultsLength$ and isLoading$
the result of the fetchFn, already mapped to MediatorData
Completes all created observables so there are no memory leaks.
You have to call this manually!
This function initialises the page reset and the fetch function, effectively starting the mediator. It won't be called automatically. You may want to call it at the end of your subclass' constructor.
this.onPageReset$ = this.createOnPageReset();
this.onPageReset$.subscribe(value => this.handlePageReset(value));
// within this method any errors will be forwarded to `handleError`
this._mediatorData$ = this.createDataFetch();
this._mediatorData$.subscribe(result => this.handleResult(result));The default config for mediators.
{
trackByFn: index => index, // track by index
attempts: 0, // do not retry
debounceLoading: 150 // debounce loading indicator by 150ms
}Generated using TypeDoc
This mediator class takes care of connecting and managing an Angular Material table with pagination, sorting and data from an observable. It takes care of:
fetchfunction when thetrigger$, sorting or page changestrigger$or sorting changesAfter creating an object of the mediator and calling the
startmethod, it will automatically be ready to load the data, as soon as thetrigger$observable emits.start