I'm currently working on an Angular 5 project where I have integrated a table to display data using MatTableModule from angular material. This specific inquiry consists of two parts.
Within my project, there is a service that sends a GET request to the API and retrieves all the necessary data. The handling of this data occurs in the component.ts file mentioned below. Although this operation runs smoothly, the issue arises when viewing the table on smaller screens due to its lack of responsiveness. Consequently, I aim to iterate through the received data and exhibit it in an alternate format tailor-made for compact screens. Unfortunately, I am encountering hurdles while attempting to carry out this task.
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { DataSource } from '@angular/cdk/collections';
import { RoutesService } from '../../services/routes/routes.service';
import { Routes } from '../../services/models/routes.model';
@Component({...})
export class RoutesComponent implements OnInit {
public displayedColumns = ['from', 'to', 'departures', 'duration', 'price'];
public dataSource = new RoutesDataSource(this.routesService);
constructor(private routesService: RoutesService) { }
ngOnInit() { }
}
export class RoutesDataSource extends DataSource<any> {
public iterable: string[] = ["foo", "bar"];
constructor(private routes: RoutesService) {
super();
}
connect(): Observable<Routes[]> {
return this.routes.getRoutes();
}
disconnect() {}
}
In my template document:
<mat-table [dataSource]="dataSource">
<!-- From Column -->
<ng-container matColumnDef="from">
<mat-header-cell *matHeaderCellDef> From </mat-header-cell>
<mat-cell *matCellDef="let route"> {{route.from}} </mat-cell>
</ng-container>
<!-- To Column -->
<ng-container matColumnDef="to">
<mat-header-cell *matHeaderCellDef> To </mat-header-cell>
<mat-cell *matCellDef="let route"> {{route.to}} </mat-cell>
</ng-container>
<!-- Departures Column -->
<ng-container matColumnDef="departures">
<mat-header-cell *matHeaderCellDef> Departures </mat-header-cell>
<mat-cell *matCellDef="let route">{{route.departures}}</mat-cell>
</ng-container>
<!-- Duration Column -->
<ng-container matColumnDef="duration">
<mat-header-cell *matHeaderCellDef> Duration </mat-header-cell>
<mat-cell *matCellDef="let route"> {{route.duration}} </mat-cell>
</ng-container>
<!-- Price Column -->
<ng-container matColumnDef="price">
<mat-header-cell *matHeaderCellDef> Avg_price </mat-header-cell>
<mat-cell *matCellDef="let route">
<button mat-raised-button color="primary">{{route.avg_price}}</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
The objective is to be able to loop through the retrieved data outside of mat-table. Apparently, linking dataSource to mat-table initiates an automatic subscription to the service, enabling access to the values within. However, replicating this process outside of mat-table poses a challenge.
Furthermore, I seek guidance on how to access the 'iterable' property present in the RoutesDataSource class from within the Component class. Could someone assist me with this task? Additionally, I'm struggling to implement syntax highlighting in this code!
Your valuable assistance would be highly appreciated. Thank you.