I'm using this code in my template:

<mat-tab-group   mat-align-tabs="start"   (selectedTabChange)="onScrollDown($event)">

and this code is in my component:

  onScrollDown(evt:any ) {
    
    
   
      
    setTimeout(()=>{
         
        this.api.getApi().subscribe(({tool,beuty}) => {
          
            this.beu=beuty.slice(0,this.i =15);
            this.tools=tool.slice(0,this .i =15);
            
        })
     
        if (evt.index === 0) { console.log('ddd')};
            
    },1000);
   

  }

The problem is when I see the website the current evt.index is zero and the if statement does not work, it works when I change the tab and then go back to the first tab.

I think it is related to selectedTabChange.

If I want my if statement to work when I see the website what should I do?

CodePudding user response：

Use ngOnInit

Simple example:

export class FunnyClass implements OnInit {

    ngOnInit() {
        if(whatever...)...
    }
}

CodePudding user response：

Material tab group fires the event when the tab group changes, not when it loads.

It also sets selectedIndex only when a new index is selected. If selectedIndex is not set, it defaults to 0. If it is set, it uses it.

I don't agree with that behavior, I think selectedIndex should be set if it is not set, but that's how it is.

You can bind selectedIndex to a getter and setter. That way you can call other functions when it changes.

<mat-tab-group [(selectedIndex)]="selectedIndex">
  <mat-tab label="First">Content 0</mat-tab>
  <mat-tab label="Second">Content 1</mat-tab>
</mat-tab-group>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  _selectedIndex: number = 0;

  get selectedIndex(): number {
    return this._selectedIndex;
  }
  set selectedIndex(value: number) {
    if (value !== this._selectedIndex) {
      this._selectedIndex = value;
      
      // replace with if _selectedIndex === 0 or some function;
      console.log(this._selectedIndex);
    }
  }
}

You set selectedIndex in ngOnInit(), or load it back from some state or url.

...
export class AppComponent {
  ...
  ngOnInit() {
    this.selectedIndex = 0;
  }
}

CodePudding user response：

Your question requires re-formulation. The dots are just not connected. In case you want to detect the tab change and manipulate your view based on activated tab, Angular Material has MatTabChangeEvent to detect the active tab in MatTabGroup and it is zero based. First tab has index 0.

onTabChange(event: MatTabChangeEvent) {
    switch (event.index) {
      case 0:
        // your logic
        break
      case 1:
         // your logic
        break
      case 2:
        // your logic
        break
    }
  }