Redirect in a specified tab in another page from link Angular 6

Question

I'm working with Angular 6.2 & Angular Material.

I have a page with mat tabs (3 tabs).

It is possible to redirect in this page but with the 3rd tab active? From clicking a link in the navbar.

It looks like not possible, there isn't any solution for this on websites.

Not sure if I understood you correctly, You want to move to another page when someone click on some tab? — Talg123, Jan 23 '19 at 12:01
You can always pass information in your URL using queryParams, and subscribe queryParams in your component. Base on this you can open any specific state. — kris_IV, Jan 23 '19 at 12:03

score 3 · Accepted Answer · answered Jan 23 '19 at 14:02

I found a good solution:

I use queryParams

<a routerLink="/account" [queryParams]="{ tab: 'notifications'}">Link</a>

Then I set my tab active if there is tab & it's value = notifications:

[active]="tab && tab === 'notifications'"

In the controller I set tab (this.tab) if there is queryparams and I remove it so I never see

?tab=notifications

in my URL.

ngOnInit() {
  this.activatedRoute.queryParams.subscribe((params) => {
    if (params.tab) {
      this.tab = params.tab;
      this.route.navigate([], {
        queryParams: {
          tab: null,
        },
        queryParamsHandling: 'merge',
      });
    }
  });
}

Where to add this [active]="tab && tab === 'notifications'" – viveka Jun 06 '20 at 10:52 — viveka, Jun 06 '20 at 10:52
@viveka on mat-tab component. `` – PierreD Jun 10 '20 at 10:04 — PierreD, Jun 10 '20 at 10:04

score 2 · Answer 2 · answered Jan 23 '19 at 12:02

2

If you are using a mat-tab-group, there is an input property to specify the index of the active tab.

@Input() selectedIndex: number | null => The index of the active tab.

Refer the Official docs for mat tab groups

answered Jan 23 '19 at 12:02

icSapper

234
1
3
11

the selectedIndex is the first tab. But I wanna change it if I come on the page from another Link, documentation don't explain how doing this – PierreD Jan 23 '19 at 12:05
You can have a method in your component to set the selected index when redirecting, right? Or you can set it on ngOnInit() – icSapper Jan 23 '19 at 12:09
How can I know in my component if I come from the link ? It's weird solution tho – PierreD Jan 23 '19 at 12:20
So you only want to set the 3rd tab active when coming from this link? and otherwise you want to set the 1st tab active? Is that right? – icSapper Jan 23 '19 at 12:25
Yeah, exactly. And without query params. – PierreD Jan 23 '19 at 12:27
Assuming when you click this link, you are essentially loading this component (with three tabs) via a router link, so you can include an input parameter in your component to check whether you've redirected from the link or not. When routing, you can set a value and check in the ngOnChanges method to make sure that the link redirected to the component. After that you can set the tab index. – icSapper Jan 23 '19 at 12:31
1

Check out how to pass data through routing via this answer : https://stackoverflow.com/a/34364618/3763524 – icSapper Jan 23 '19 at 12:33
Checkout this stackblitz app, that url will open the 3rd tab in the page, the url parsing could also be different: https://mat-tab-sync-with-hash-fragment.stackblitz.io/#3 – jo_va Jan 23 '19 at 13:07

jo_va · Answer 3 · 2019-01-23T20:17:40.127

Here is a solution using the Location service that is not using the Angular Router and that listens to the hash fragment in the route and sets the selectedIndex to it, that way, the tabs content are all loaded in the same page but the activeTab will match the fragment set in the route.

The links to to go to the page and activate a tab would be /my-page#0, /my-page#1...

Here is a stackblitz: https://stackblitz.com/edit/mat-tab-sync-with-hash-fragment

import { Component } from '@angular/core';
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [Location, { provide: LocationStrategy, useClass: PathLocationStrategy }]
})
export class AppComponent  {
  name = 'Angular';
  selectedIndex = 0;

  constructor(private location: Location) {
    this.selectedIndex = (+this.location.path(true).substr(1) - 1) || 0;
    this.location.subscribe((value: PopStateEvent) => {
      if (value.url) {
        this.selectedIndex = (+value.url.substr(1) - 1) || 0;
      }
    });
  }
}

<mat-tab-group [selectedIndex]="selectedIndex">
...

Hope that helps.

Not working, I cannot change the link of the page. I have got one page with 3 tabs, not 3 pages. — PierreD, Jan 23 '19 at 12:06
I edited the solution to use the `selectedIndex` and parse it from the hash fragment in the route, so you can route to your page and the activate the tab indicated in the route. — jo_va, Jan 23 '19 at 12:17

Redirect in a specified tab in another page from link Angular 6

3 Answers3