Mastering the art of implementing md-table with services in Angular 4

Question

Mastering the art of implementing md-table with services in Angular 4

I am a newcomer to the world of angular and I am attempting to utilize the new md-table component in Angular Material 2 with Angular 4.

I have created a service that fetches simple arrays of content from an API. However, I am struggling to use this service as a data source for the md-table as I am unable to retrieve the data from the service (it always returns an empty array).

Prior to using md-table, I had successfully used the service without any issues.

Below is the code for the component :

// Component code here
...

Here is the corresponding HTML code :

// HTML code here
...

And here is the service code :

// Service code here
...

I am unsure about the correct way to call the service using the datasource. I have tried calling it in the ngOnInit method as I did previously, but it does not seem to work. Any help would be greatly appreciated.

Thank you for your assistance.

angular typescript angular-material2

Answer 1

Answer №1

Check out this demonstration of retrieving data using HTTP: https://plnkr.co/edit/mjQbufh7cUynD6qhF5Ap?p=preview

There is an issue with the GroupDatabase where it is not populating the dataChange stream with any data values. The BehaviorSubject starts with an empty array but remains empty as no additional data is added to it. This is why the table is only displaying an empty array.

Keep in mind that Angular will not trigger the ngOnInit lifecycle hook since GroupDatabase is not a directive and does not participate in the change detection process.

Instead of calling this.getAllGroups() in ngOnInit, it is recommended to move it to the constructor of GroupDatabase and subscribe to its result:

export class GroupDatabase {
  public dataChange: BehaviorSubject<Group[]> = new BehaviorSubject<Group[]>([]);
  get data(): Group[] { return this.dataChange.value }

  constructor(groupService: GroupService) {
    groupService.getAllGroups().subscribe(data => this.dataChange.next(data));
  }
}

Alternatively, you can eliminate the usage of GroupDatabase and have your CustomDataSource directly interact with your GroupService.

export class CustomDataSource extends DataSource<Group> {

  constructor(
      private _groupService: GroupService, 
      private _paginator: MdPaginator) { }

  connect(): Observable<Group[]> {
    const displayDataChanges = [
      this._groupService.getAllGroups(),
      this._paginator.page
    ];

    return Observable.merge(...displayDataChanges).map((data, page) => {
      const clonedData = data.slice();

      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      return data.splice(startIndex, this._paginator.pageSize);
    })
  }

  disconnect() {}
}

Answer 2

Check out this demonstration of retrieving data using HTTP: https://plnkr.co/edit/mjQbufh7cUynD6qhF5Ap?p=preview

There is an issue with the GroupDatabase where it is not populating the dataChange stream with any data values. The BehaviorSubject starts with an empty array but remains empty as no additional data is added to it. This is why the table is only displaying an empty array.

Keep in mind that Angular will not trigger the ngOnInit lifecycle hook since GroupDatabase is not a directive and does not participate in the change detection process.

Instead of calling this.getAllGroups() in ngOnInit, it is recommended to move it to the constructor of GroupDatabase and subscribe to its result:

export class GroupDatabase {
  public dataChange: BehaviorSubject<Group[]> = new BehaviorSubject<Group[]>([]);
  get data(): Group[] { return this.dataChange.value }

  constructor(groupService: GroupService) {
    groupService.getAllGroups().subscribe(data => this.dataChange.next(data));
  }
}

Alternatively, you can eliminate the usage of GroupDatabase and have your CustomDataSource directly interact with your GroupService.

export class CustomDataSource extends DataSource<Group> {

  constructor(
      private _groupService: GroupService, 
      private _paginator: MdPaginator) { }

  connect(): Observable<Group[]> {
    const displayDataChanges = [
      this._groupService.getAllGroups(),
      this._paginator.page
    ];

    return Observable.merge(...displayDataChanges).map((data, page) => {
      const clonedData = data.slice();

      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      return data.splice(startIndex, this._paginator.pageSize);
    })
  }

  disconnect() {}
}

Mastering the art of implementing md-table with services in Angular 4

Answer №1

Similar questions

What is the best way to incorporate infinite scrolling into my Angular carousel implementation?

The attribute 'id' cannot be found in the class 'Foods'

What is the method for substituting one text with another using two-way data binding?

The function `Object.entries().map()` in TypeScript does not retain the original data types. What changes can I make to my interface to ensure it works correctly, or is there a workaround

When using string as a primitive type in Vue 3, what distinguishes the usage of PropType in props from not using it?

Can we modify the styling of elements in Angular based on an object property?

Using ngIf with values from an array in ngFor in Angular 2: How to make it work?

Display a symbol retrieved from the backend server

Leveraging the data set offered by Service and Interface in Angular to display specific data in Component

Strange behavior in Angular's http response

Trouble accessing images from database in Angular 2 with Firebase

Using ngx-bootstrap typeahead with custom itemTemplate for objects

The component 'Form' cannot be utilized in JSX because its return type, 'ReactNode', is not a valid JSX element

The appearance of the Angular app undergoes a change following deployment using ng build

The automatic inference of function argument types and the implementation of conditional types

Angular2 - The Iterable Differ fails to detect changes

Having troubles with *ngFor in Angular 8? Learn how to use ng-template effectively

Is there a tool in Node.js to set up a new project, similar to the scaffolding feature in Visual Studio for C# projects

Aligning two identical components within the same container when triggered by a single click

What is the best way to incorporate a 'category filter' in Angular2?

Mastering the art of implementing md-table with services in Angular 4

Answer №1

Similar questions

What is the best way to incorporate infinite scrolling into my Angular carousel implementation?

The attribute 'id' cannot be found in the class 'Foods'

What is the method for substituting one text with another using two-way data binding?

The function `Object.entries().map()` in TypeScript does not retain the original data types. What changes can I make to my interface to ensure it works correctly, or is there a workaround

When using string as a primitive type in Vue 3, what distinguishes the usage of PropType in props from not using it?

Can we modify the styling of elements in Angular based on an object property?

Using *ngIf with values from an array in *ngFor in Angular 2: How to make it work?

Display a symbol retrieved from the backend server

Leveraging the data set offered by Service and Interface in Angular to display specific data in Component

Strange behavior in Angular's http response

Trouble accessing images from database in Angular 2 with Firebase

Using ngx-bootstrap typeahead with custom itemTemplate for objects

The component 'Form' cannot be utilized in JSX because its return type, 'ReactNode', is not a valid JSX element

The appearance of the Angular app undergoes a change following deployment using ng build

The automatic inference of function argument types and the implementation of conditional types

Angular2 - The Iterable Differ fails to detect changes

Having troubles with *ngFor in Angular 8? Learn how to use ng-template effectively

Is there a tool in Node.js to set up a new project, similar to the scaffolding feature in Visual Studio for C# projects

Aligning two identical components within the same container when triggered by a single click

What is the best way to incorporate a 'category filter' in Angular2?

Using ngIf with values from an array in ngFor in Angular 2: How to make it work?