sina, 1114 Pee Javascript - Angular material: How to etvieve all data but display in diferent tabs ~ Stack Overtow_
Angular material: How to retrieve all data but display in different tabs
Asked 2 years, 9 months ago Active 2 years, 9 months ago Viewed 2k times
Ihave a design question: what's the best way to eagerly load two different Material tabs? | want
‘one tab for active records and one for inactive.
Do | need two different datasources, or can | tell my datasource to use a discriminator (a boolean)
to determine what tab the data is displayed on? I'm sorry | 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,
javascript angular tabs angular-material
Share Edit Follow cited Feb $9. 1711 asked Feb $9 at 1647
Gregor Abert FE cnDyson
mi 1 8 2 Sok e208 23 46
I would use a discriminator. Does this help at all? todomve.com/examples/angularjs/# ~ OK sure Feb 5 ‘19
at 1650 7
Thanks, but | don't think 'm using angular, just regular angular. Is there a difference?? - CNDyson Feb S
"19 at 1651
Nope - the example in the source just uses angular as a dependency: github.com/tastejs/todomve/blob/ah=
pages/examples/.. — OK sure Feb 5 '19 at 16:53
| can't seem to find the content that's pertinent to me...Can you possibly post an example, and answer the
question? | would love to give you points! - CNDyson Feb 5'19 at 1655
This is a classic example of what Angular Services were implemented to assist with. Namely, sharing data
between components/views/whatever. Please read this: angular io/tutorial/toh-pta ~ Randy Casburn Feb 5
"19 at 1655
2 Answers Active | Oldest | Votes
Ihave a design question: what's the best way to eagerly load two different Material tabs?
1 | 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.
AY _ Unless it doesn't fit your use case for some reason, suggest you to go with that
hitpsstackovorow.com/questions/64539259'angular-materiabhaw-lo~etreve-alldata-but
AnactiveSource | async">
Insert your table config here -->
Component:
Import { Component, OnZnit } from ‘@angular/core';
Anport { Observable } from "rxis"s
Inport { filter } from ‘rxjs/operators’;
import { YourDataService } fron *./your-data-service’ ;
component ((
selector: ‘app-test’,
tenplateUrl: './test.conponent.html',
styleUris: ['./test.conponent.scss”]
»
export class TestComponent implements Oninit {
activesource: Observablecany{]>;
Anactivesource: Observablecany[]>5
constructor(private dataService: YourDataService) ¢ )
ngontnit(): void (
this.activeSource = this.dataService.data$.pipe(filter(record =>
recond.active))
‘this.inactiveSource = this.dataService.datas.pipe(filter(record =>
Irecord.active));
y
markRecordasActive(id: string) {
this. dataService.markAsActive(1d) 5
y
markRecordastnactive(id: string) (
this.dataService.markAsrnactive(1d);
>
Share Edit Follow answered Feb 5°19 at 1742
PPD andrew
“an 10 2
htpsstackovortow.comiquestions/64539259'angular-maleriathaw-lo~etrevealldata-but
