Angular MatTabChangeEvent does not trigger on page load

Question

I am making use of (selectedChange)="functionName($event)" to get index of my active tab. However on page load i cannot triggger this event as it only gets triggered after i change the tab atleast once to get a returned object of MatTabChangeEvent containing two objects tab and index.

In both tabs i have a mat table with pagination. Also there is a search bar that search data from database and show it in their respective tabs but here the problem for me is if on page load user went straight for search bar then i would not know which tab is currently active so my conditional statement that shows data in their respective tab based on user search will give an Uncaught error at this.activeTab.index does not exist. But once the user have actually change the tab then i have the active tab index value and my code keeps working fine.

So how can i get MatTabChangeObject on page load too?

NOTE: I cannot use MatGroup with ViewChild since it does not return me MatTabChangeEvent like object

Here is my code

 if(this.tabEvent.index === 0) {
      $event.map((a: string) => {
        this._printService.getParcelById(this.vId, a, true).subscribe(res => {
          data.push(res);
          this.child.dataLength = $event.length;
        }, err => {
          data = [];
          this._sb.open({
            message : 'Either the parcel id does not exist in the system or it is incorrect',
            type: 'error'
          })
        });
      });
      this.dataSource$ = of(data);
    }
    else if(this.tabEvent.index === 1) {
      $event.map((a: string) => {
        this._printService.getParcelById(this.vId, a, false).subscribe(res => {
          data.push(res);
          this.child.dataLength = $event.length;
        }, err => {
          data = [];
          this._sb.open({
            message : 'Either the parcel id does not exist in the system or it is incorrect',
            type: 'error'
          })
        });
      });
      this.dataSource$ = of(data);
    }

I am emitting eventChange value in a function and then assigning that value to this.tabEvent variable that has a type of MatTabChangeEvent

You can only get a `MatTabChangeEvent` when the tab _changes_, not when the tab component loads. However, assuming your event handler is a function, you can call it yourself any time including when the page has loaded. — G. Tranter, May 12 '20 at 21:20
@G.Tranter How can i call this function `tabChanged(tabChangeEvent: MatTabChangeEvent): void { this.filter.emit(tabChangeEvent); }` when this function needs parameter with type as MatTabChangeEvent? Is there any way to statically assign values? — Ehsan Nissar, May 12 '20 at 21:24

score 1 · Accepted Answer · answered May 12 '20 at 21:29

1

This is how I have implemented Mat Tab in my projects

in HTML:

(selectedChange)="selectedTabChange($event)"

TS:

index = 0;

ngOnInit(): void {
  ...
  this.onTabChanged();
}

selectedTabChange(event) {
  this.index = this.event.index
  this.onTabChanged()
}

onTabChanged() {
  if (this.index==0) {
    ...
  } else if (this.index==1) {
    ...
  }
  ...
}

I even have tabs which are navigated by route in some pages...

There, I have slight change in TS

constructor(ar: ActivatedRoute) { }

ngOnInit(): void {
  this.ar.queryParams.subscribe(param => {
    if (param.tab) this.index = Number(param.tab); else this.index = 0;
    this.onTabChange()
  })
  ...
}

Hope it helps!

answered May 12 '20 at 21:29

T. Sunil Rao

1,167
5
14

Looks like a good solution but in my case i have divided my code into smart and dumb components. So all the business logic is in my smart/parent component while dumb component is only used to emitting or assigning data to dataSource. So even in your code you must have to trigger `selectedTabChange(event)` atleast once to assign value to `this.index`. How would you do that? – Ehsan Nissar May 12 '20 at 21:34
1

that is done in `ngOnInit`. Check it. You need not trigger `selectedTabChange(event)` to set `this.index` – T. Sunil Rao May 12 '20 at 21:35
1

I see so you are not assigning the whole object but instead you just chose to make use of only index property from your ChangeEvent and by provided 0 to your variable to get default value. That solved the issue for me. It was quite simple. Thanks for your help :) – Ehsan Nissar May 12 '20 at 21:39

Angular MatTabChangeEvent does not trigger on page load

1 Answers1