Tips for navigating to a different tab within a component in Angular 12

I am attempting to use the routerLink to redirect to a different tab within another component.

For instance, in the Dashboard component:

<a class="hvr-icon-forward" [routerLink]="['/app/Snow']">
            <span class="setup-profile-button">Show all enquiries</span>
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="hvr-icon"><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>

The Enquiries component consists of two tabs: New Enquiries & History tabs. My goal is to redirect to the History tab in the Enquiries component when clicking on the "show all enquiries" button from the Dashboard component.

In Enquiries.component.html:

 <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active" 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" class="tab-pane active" id="new-tab">
         ...
      </div>


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

I have attempted the following code, but it does not redirect to the specific tab within the component.

<a class="hvr-icon-forward" [routerLink]="['/app/Snow?history-tab']">
        
      </a>
jqueryangulartypescript

Answer №1

You're on the right track. To continue, make sure to include history-tab as query parameters:

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

In your component, the code should look 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: Depending on your requirements, you can replace 'queryParams' with 'params'
    this.activatedRoute.queryParams.subscribe(params => {
        this.tabToShow = params['show'];
        console.log(this.tabToShow);
      });
  }

}

In your template:

 <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active" 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" class="tab-pane active" *ngIf="tabToShow === 'new-tab'" id="new-tab">
         ...
      </div>


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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing a Class Addition Functionality Upon Button Click in AngularJS

I have a form that initially has disabled fields. Users can only view the information unless they click the edit button, which will enable the fields with a new style (such as a green border). I want to add a class to these fields that I can customize in m ...

javascriptjqueryhtmlcssangularjs

Set the GridToolbarQuickFilter text box to have an outlined style in Material UI v5

How can I customize the appearance of the GridToolbarQuickFilter textbox, such as outlining it? Ideally, I would like to accomplish this through theme.tsx, but I am open to any suggestions. https://i.stack.imgur.com/H1Ojj.png I have experimented with var ...

reactjstypescriptmaterial-uimui-xmui-x-data-grid

The problem within the nebular modules, such as 'nb-card' and 'nb-stripper', is causing issues

Struggling with using nebular in an Angular project - the nb-card component seems to be causing issues for me. Here is the error message I keep encountering. Any advice on how to resolve this? ERROR in src/app/kyc/documentverification/documentverification ...

angularnebular

Is it possible to toggle multiple menus programmatically at once?

In my template, I have 2 menu components set up like this: <button md-icon-button [md-menu-trigger-for]="menu"> <md-icon>more_vert</md-icon> </button> <md-menu #menu="mdMenu"> <button md-menu-item>Refresh</butt ...

angularangular2-material

Redirecting to a different page using Jquery

Is there a way to update the status without being redirected to base_url().'/Admin/Jobs/' every time? Code: <?php if ($key['status'] === '1'): ?> <?php echo form_open('Admin/update_job_status'); ?> < ...

phpjqueryajaxcodeigniter-3

Convert the Include/require output to JSON encoding

I have a fully developed PHP application that was not created following the MVC design pattern and lacks a templating system like Twig. The issue I am facing is that instead of receiving a variable that stores the template (HTML output), it directly print ...

phpjqueryajaxjsonheader

What is the best method to add PHP while loop data to a jQuery array?

How can I populate a jQuery array with user data using a while loop? <?php while($get_users_table_details = mysql_fetch_array($deatails)) { if(empty($get_users_table_details["photo"])) { $pics = "photos/avatar.gif"; } else { $pics = "ph ...

phpjqueryarrayswhile-loop

Tips for deactivating the range slider in jquery once the checkbox is marked

I need assistance with disabling my range slider when a checkbox is checked using jQuery. If the checkbox is unchecked, then I want the range slider to be enabled. Here's the code snippet I have: $(document).on('change','#checkbox6b&ap ...

phpjquery

Encountering dependency tree issues while trying to install @angular/material

I'm running into an issue while attempting to install the @angular/material module. Every time I execute the command: $ npm install --save @angular/material npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! ...

angularnpm

Can I initiate an AJAX call from a different JSP page?

My scenario involves a JSP page that opens another JSP in a new tab. In the second JSP, I upload a file to the server, as I have certain important operations to perform there. However, I also need to include a link to this uploaded file in the first JSP ...

javascriptjavajqueryajaxjsp

Guide on linking an XML reply to TypeScript interfaces

Currently, I am faced with the task of mapping an XML response (utilizing text XMLHttpRequestResponseType) from a backend server to a TypeScript interface. My approach has been to utilize xml2js to convert the XML into JSON and then map that JSON to the Ty ...

javascriptxmlangulartypescriptxml2js

Customize validation timing in Angular Reactive Forms

One common query about the conditional validator is understanding when exactly it gets triggered. Imagine a simple form with just two fields this.form = formBuilder.group({ emailRequired: [false], emailRecipients: [''] }); Now, let's s ...

angularvalidationangular-reactive-forms

Incorporate Product Choices into Shopping Cart using AJAX and <form> | Opencart

I'm new here and would really appreciate any help with my first question. I've searched for related information, but nothing quite fits what I need. Currently, I'm attempting to add a product along with its options to the cart using an HTML ...

phpjqueryajaxopencart

Which is the preferred choice for retrieving data using ngrx: Resolver or Guard?

Utilizing Angular along with ngrx, my goal is to navigate to a certain route and ensure that the necessary data is available in the ngrx/store. I am implementing a ngrx/store action/effect/reducer to make API calls. The component associated with the route ...

angularngrxngrx-store

Tips for customizing the `src/app/layout.tsx` file in Next.js 13

I am looking to customize the layout for my /admin route and its child routes (including /admin/*). How can I modify the main layout only for the /admin/* routes? For example, I want the / and /profile routes to use the layout defined in src/app/layout.ts ...

javascriptreactjstypescriptnext.jsnext.js13

The 'validate' property within the 'MappingService' class cannot be assigned to the 'validate' property in the base class 'IMappingService' in typescript version 2.8.0

Currently, I am utilizing the AngularJS framework (version 1.5.8) in tandem with the latest TypeScript files (2.8.0). However, upon updating to the newest version of TypeScript, the code below is failing to compile. The IMappingService interface: export ...

typescript

A guide on retrieving the upload status of a file using an AJAX post request

Is there a way to retrieve the status of uploaded files when the user cancels the process while uploading multiple files using an ajax call? This is how I am currently making the ajax request to upload files: var request = $.ajax({ url: 'file ...

javascriptphpjqueryajaxabort

Resolving conflicts between TypeGraphQL and Prisma 2 types

Currently, my development stack consists of TypeGraphql, Prisma 2, an Apollo Express server, and a PostgreSQL database. To facilitate the generation of TypeScript types, I utilized Prisma to introspect my database and generate types from the schema.prisma ...

typescriptgraphqlprismatypegraphql

Colorbox's functionality struggles to uphold several groups simultaneously without encountering errors

I have incorporated Colorbox on this page. On the setup, I have various groups listed as groups 1 to 9. However, when clicking on the second and third items, they display correctly according to the provided code. My aim is to make everything appear in the ...

javascriptjquerycsscolorbox

Two-column layout with consistent height vertically, but varying heights on individual rows

By using JavaScript, I am able to ensure that two columns have equal height. The left column contains user input which can vary in length, causing some columns to have more content than others. My current issue is that there are multiple rows instead of ju ...

javascriptjquerycss