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
@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? — ahsan nissar

T. Sunil Rao T. Sunil Rao · Accepted Answer · 2020-05-12T21:29:19

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!

Angular MatTabChangeEvent does not trigger on page load

1 Answers