Switch router - outlet to active tab

Question

We are currently planning a new angular 7 app with material design (md-tabs) which will work with several tabs. Basically it should be possible to create new tabs dynamically, which should represent the content of a route. At the beginning the start page should be opened in the first tab which always exists. With certain actions a new tab will be created with a route.

If you now click on a link in the navigation, this content should always be loaded in the currently active tab.

To create these new tabs dynamically I use an array, this is not a problem. How I can load routes dynamically in new tabs and how I can redirect the router-outlet dynamically into another tab is a mystery to me. Does anyone have a good idea if and how this can be done?

I am looking for exactly the same feature, did you find any solution? — Dewitt

user3804427 user3804427 · Accepted Answer · 2019-03-20T09:20:34

it is my example:

import { Component, OnInit } from '@angular/core';
import { ChService } from '../../services/ch.service';
import { Router } from '@angular/router';


@Component({
  selector: 'app-dashboard',
  templateUrl: 'login.component.html'
})
export class LoginComponent implements OnInit {
  pb: boolean = false;

  ngOnInit() {
    if (this.ch.getLocalUser()) {
      this.ch.token = this.ch.getLocalUser().auth_key;
      this.router.navigate(['/crm/myorders'])
    }
  }

  constructor(public ch: ChService, private router: Router) { }

  login() {
    this.ch.last_err = '';
    this.ch.getAuthtoken();
  }
 }

I navigate to route by this string:

 this.router.navigate(['/crm/myorders'])

Good luck!

Switch router - outlet to active tab

1 Answers