CODEWITHSUNDEEP
javascriptangulartabsangular-material
aatuc210
aatuc210

Reputation: 1868

Angular material: How to retrieve all data but display in different tabs

I have a design question: what's the best way to eagerly load two different Material tabs? I want one tab for active records and one for inactive.

Do I need two different datasources, or can I tell my datasource to use a discriminator (a boolean) to determine what tab the data is displayed on? I'm sorry I don't have any sample code, because I'm not sure where to start!

Additionally, when a row on the active tab is deleted, it should then show up on the inactive tab. Would love to do this without repainting the screen...

Upvotes: 1

Views: 2851

Answers (2)

Andrew
Andrew

Reputation: 933

Angular Material Tabs load eagerly by default. So, just have two different tabs setup with a table, and supply those tables with a different data source. Sounds like a great use case for rxjs, allowing you to easily have both your table data sources sourced from the same underlying place (i.e. your service, for example). This means you can make changes to your data in the source of truth for that data (i.e. your data service) and those changes will propagate to your tables.

HTML:

<mat-tab-group>
    <mat-tab label="Active">
        <ng-template matTabContent>
            <table mat-table [dataSource]="activeSource | async">
                <!-- Insert your table config here -->
            </table>
        </ng-template>
    </mat-tab>
    <mat-tab label="Inactive">
        <ng-template matTabContent>
            <table mat-table [dataSource]="inactiveSource | async">
                <!-- Insert your table config here -->
            </table>
        </ng-template>
    </mat-tab>
</mat-tab-group>

Component:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';
import { YourDataService } from './your-data-service';

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

    activeSource: Observable<any[]>;
    inactiveSource: Observable<any[]>;

    constructor(private dataService: YourDataService) { }

    ngOnInit(): void { 
        this.activeSource = this.dataService.data$.pipe(filter(record => record.active));
        this.inactiveSource = this.dataService.data$.pipe(filter(record => !record.active));
    }

    markRecordAsActive(id: string) {
        this.dataService.markAsActive(id);
    }

    markRecordAsInactive(id: string) {
        this.dataService.markAsInactive(id);
    }
}

Upvotes: 0

GCSDC
GCSDC

Reputation: 3500

I have a design question: what's the best way to eagerly load two different Material tabs? I want one tab for active records and one for inactive.

The default behaviour for material tabs is to eagerly load the tab contents, as described here. Unless it doesn't fit your use case for some reason, suggest you to go with that.

Do I need two different datasources, or can I tell my datasource to use a discriminator (a boolean) to determine what tab the data is displayed on? I'm sorry I don't have any sample code, because I'm not sure where to start!

This is actually a design decision you should make based on the architecture of your app, and it is difficult to propose something without seeing a more concrete example or code. If the itens displayed on both tabs are part of the same collection (DB collection, table, etc) and there is only a difference between then regarding a status or flag, it usually makes sense to use the same datasource and filter it based on the status/flag. Otherwise, you will possibly want to have two separate datasources.

Additionally, when a row on the active tab is deleted, it should then show up on the inactive tab. Would love to do this without repainting the screen...

If you use a single datasource, there would only be needed to change the status/flag of the item and it will be updated on the view. For different datasources, you should need to move the item between both.

Regarding the repainting, it will obviously be required when the contents change (otherwise there will be a difference between your model and view). Still, Angular/Angular Material are built to optimize it, and so it should not be a concern as long as you follow Angular best practices.

Upvotes: 1

Related Questions