How to redirect to another component's tab in angular 12?-CodePudding

I am trying to redirect to another component's tab using the routerLink.

for example: Dashboard component:

<a  [routerLink]="['/app/Snow']">
            <span >Show all enquiries</span>
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" ><path _ngcontent-wtu-c48="" d="M-4.43075e-07 10.1364L-3.4373e-07 7.86364L13.6364 7.86364L7.38636 1.61364L9 -3.93402e-07L18 9L9 18L7.38636 16.3864L13.6364 10.1364L-4.43075e-07 10.1364Z" fill="white"></path></svg>
          </a>

This enquiries component contains two tabs New Enquiries & History tabs. What I need is If I click on that show all enquiries button from the dashboard component, then it should redirect to the enquires component's History tab.

Enquiries.component.html:

 <ul  role="tablist">
            <li role="presentation"  id="register">
                <a href="#new-tab" aria-controls="register" role="tab" data-toggle="tab" (click)="SelectForm('NewForm')">{{"New"|TextByLanguage:welcomePopup:"SUP2146":selectedLanguageCode}}</a>
            </li>
            <li role="presentation" id="regionInfo">
                <a href="#history-tab" aria-controls="regionInfo" role="tab" data-toggle="tab" (click)="SelectForm('ViewRequests')">{{"History"|TextByLanguage:welcomePopup:"SUP2147":selectedLanguageCode}}</a>
            </li>
        </ul>

     <div role="tabpanel"  id="new-tab">
         ...
      </div>


      <div role="tabpanel"  id="history-tab">
       ...
       </div>

I tried like below but it is not redirecting to that particular component's tab.

<a  [routerLink]="['/app/Snow?history-tab']">
        
      </a>

CodePudding user response：

You are going in the right direction. Just add history-tab as query params:

<a  [routerLink]="['/app/Snow']" [queryParams="show:history-tab"]</a>

In your component read like this:

import {Router, ActivatedRoute, Params} from '@angular/router';
import {OnInit, Component} from '@angular/core';

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {}
  public tabToShow: string = '';
  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        this.tabToShow = params['show'];
        console.log(this.tabToShow);
      });
  }

}

In your template:

 <ul  role="tablist">
            <li role="presentation"  id="register">
                <a href="#new-tab" aria-controls="register" role="tab" data-toggle="tab" (click)="SelectForm('NewForm')">{{"New"|TextByLanguage:welcomePopup:"SUP2146":selectedLanguageCode}}</a>
            </li>
            <li role="presentation" id="regionInfo">
                <a href="#history-tab" aria-controls="regionInfo" role="tab" data-toggle="tab" (click)="SelectForm('ViewRequests')">{{"History"|TextByLanguage:welcomePopup:"SUP2147":selectedLanguageCode}}</a>
            </li>
        </ul>

     <div role="tabpanel"  *ngIf="tabToShow === 'new-tab'" id="new-tab">
         ...
      </div>


      <div role="tabpanel"  *ngIf="tabToShow === 'history-tab'" id="history-tab">
       ...
       </div>