0

I have an Auth component. This component uses the mat-tab-group component which has two mat-tab components that allow you to easily go back and fourth between login and sign up. Login is at index 0 (the first displayed form) sign up is at index 1 (the second displayed form). When ever user tries to sign up with an already existing username, the validations on the backend fail and I want to take the user back to the 'Sign Up' instead of the default one, the first one, which is 'Login'. When the tabs are changed I store the last viewed tab in localStorage.

I have an onTabChange event handler

`onTabChange(event: MatTabChangeEvent){
    console.log("Change tab event: ", event);
    if(event.tab.textLabel.toLocaleLowerCase() == "sign up"){
      localStorage.setItem("selectedTab", event.index.toString());
      window.history.replaceState({}, '', '/signup')     
      console.log(this.tabs);
    }
    if(event.tab.textLabel.toLocaleLowerCase() == 'login'){      
      localStorage.setItem("selectedTab", event.index.toString());
      window.history.replaceState({}, '', '/login')      
    }
  }`

It doesn't matter where I put this code:

`const activeTabIndex = parseInt(localStorage.getItem('selectedTab'));
    this.selected.setValue(activeTabIndex);`

I am always getting the ExpressionChangedAfterItHasBeenCheckedError. But it really confuses me because my code is in the constructor?

I have tried adding the ChangeDetectorRef and added the detectChanges(); line in the ngAfterContentInit life cycle hook, but the same error keeps coming up.

O.MeeKoh
  • 1,976
  • 3
  • 24
  • 53
  • I had a similar issue. For me, changing tabs sometimes resulted in this error. The problem was that I had `...` and `isTabActive(tab)` function returned true/false depending on the route. Changing that to `[ngClass]="isTabActive(tab) ? 'active' : ''"` solved the problem. It seems that setting the `active` class is better than the attribute. – Marian Simonca Aug 27 '19 at 08:02
  • 1
    And I know it might be too late and you most probably solved your problem. But for those who see this and are in trouble, every advice is useful. – Marian Simonca Aug 27 '19 at 08:04

0 Answers0