Correct Routing in a tabbed modal in Angular

Question

I created a modal using MatDialog. This Modal opens a component that has a tabbed page inside.

this.dialog.open(AuthComponent, dialogConfig);

I used the mat-tab-nav-bar to open the two tabbed components for Login and Register.

<nav mat-tab-nav-bar mat-align-tabs="center">
        <a mat-tab-link
           *ngFor="let link of navLinks"
           [routerLink]="link.path"
           routerLinkActive #rla="routerLinkActive"
           [active]="rla.isActive">
          {{link.label}}
        </a>
      </nav>

      <router-outlet></router-outlet>

To open the modal works fine, but the login component is not loaded when i open the modal. I first have to click on the link.

"Click on Login"

My routing looks pretty straight forward:

{ path: 'signup', component: SignupComponent},

{ path: 'login',  component: LoginComponent},

Do you have any thoughts? Jakob

score 2 · Accepted Answer · answered Dec 15 '18 at 08:56

2

Try this:

export class AuthComponent implements OnInit {    

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.navigate(['signup'])        
  }
}

answered Dec 15 '18 at 08:56

Chellappan வ

23,645
3
29
60

1

So simple! Thank you! – jakob witsch Dec 15 '18 at 09:05
I have encountered another problem here: If i use routing in a mat-tab-nav-bar like this i have a problem with the back button in the browser. If i click on back, the modal closes but i am still at /login or /signup – jakob witsch Dec 17 '18 at 10:25
1

try https://stackoverflow.com/questions/41874826/how-to-skip-a-page-in-browser-history-when-navigating-back – Chellappan வ Dec 17 '18 at 10:50

Correct Routing in a tabbed modal in Angular

1 Answers1