angular - Mat-tab not underlying when reload

Question

I am using mat-tab from Material Design, Angular. When I click on a tab then it becomes active and becomes underlined

However, when I reload the page on the browser, the active attribute is still true but the underlying is not appearing

Would anyone knows how to solve this issue ?

HTML

    <nav mat-tab-nav-bar>

      <!-- About tab -->
      <a mat-tab-link 
         routerLink="{{links[0][1]}}" 
         (click)="activeLink = links[0][0]"
         [active]="activeLink == links[0][0]">
        {{links[0][0]}}
      </a>

      <!-- Revenue tab -->
      <a mat-tab-link 
         routerLink="{{links[1][1]}}" 
         (click)="activeLink = links[1][0]"
         [active]="activeLink == links[1][0]">
        {{links[1][0]}}
      </a>

    </nav>

TS

export class ProfileHeaderComponent extends SubscriptionContainerComponent implements OnInit {

  user: UserFirestore;
  links = [
    ['A propos', 'about'],
    ['Revenu', 'revenue'],
  ];
  activeLink = this.links[0][0];

  constructor(
    private route: ActivatedRoute,
    private router: Router,
  ) {
    super();
  }

  ngOnInit(): void {
    // Set user and active link
    this.setUserAndActiveLink();
  }

  setActiveLink(): void {
    const isActiveProfile = this.router.isActive('/home/profile', true);
    const isActiveAbout = this.router.isActive('/home/profile/about', true);
    const isActiveRevenue = this.router.isActive('/home/profile/revenue', true);
    if (isActiveAbout || isActiveProfile) {
      this.activeLink = this.links[0][0];
    } else if (isActiveRevenue) {
      this.activeLink = this.links[1][0];
    } else {
      this.activeLink = undefined;
    }
  }

  setUserAndActiveLink(): void {
    this.subscription.add(
      this.route.data.subscribe((data: { user: UserFirestore }) => {
        // Set user
        this.user = data.user;
        // Set active link
        this.setActiveLink();
      })
    );
  }

question from:https://stackoverflow.com/questions/65947271/mat-tab-not-underlying-when-reload

Answer 1

Issue solved with

// Enable tab underlying on reload
document.body.style.display = "initial";

in component constructor