title: Routing in matdialog in Angular
body: <p>I am trying to add <strong>routing</strong> to a <strong>Angular Material Mat Dialog in angular</strong>. But there is an problem occurring.</p>
  <p>When I try to <strong>add the route URL manually</strong> from</p>
  <pre><code>https://localhost:3200
  </code></pre>
  <p>to</p>
  <pre><code>https://localhost:3200/login
  </code></pre>
  <p>or</p>
  <pre><code>https://localhost:3200/signin
  </code></pre>
  <p>it don't pop up</p>
  <blockquote>
  <p><strong>Tab Switching Problem</strong></p>
  </blockquote>
  <p>Also, There is another problem that when the dialog is opened for login and then if i tab switch to SignIn
  there is no change in URL</p>
  <p>Navbar.component.ts ( Dialog Initializing Component )</p>
  <pre><code>import { Component, OnInit, Output, EventEmitter, Inject } from '@angular/core';
  import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
  import { MatDialog } from '@angular/material/dialog';
  import { ActivatedRoute, Router } from '@angular/router';
  import { takeUntil } from 'rxjs/operators';
  import { Subject } from 'rxjs';
  
  @Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
  })
  export class NavbarComponent implements OnInit {
  
  
    flag: boolean;
    currentDialog: MatDialogRef&lt;any&gt; = null;
  
    //Dialog init
    constructor(public dialog: MatDialog, private route: ActivatedRoute, private router: Router) {
  
     }
  
    openDialog(tabvalue: number) {
  
      console.log(tabvalue);
      this.currentDialog = this.dialog.open(DialogComponent, {
        data: {tabvalue},
      });
  
      this.currentDialog.afterClosed().subscribe(result =&gt; {
        console.log(`Dialog result: ${result}`);
        this.router.navigateByUrl('/');
      });
    }
  
    ngOnInit(): void {
    }
  
  }
  
  //  dialog.component.ts 
  @Component({
    selector: 'dialog-dialog',
    templateUrl: 'dialog.component.html',
  })
  
  export class DialogComponent {
    tabs = ['Login', 'Sign in'];
  
    constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
  
    // tabvalue have only two values 0 -&gt; tabs[0] -&gt; Login and 1 -&gt; tabs[1] -&gt; SignIn
    selected = this.data.tabvalue
  }
  </code></pre>
  <p>Navbar.component.html ( template for above code )</p>
  <pre><code>&lt;mat-toolbar mat-toolbar [routerLink]=&quot;['/']&quot;&gt;
  
      &lt;button mat-icon-button (click)=&quot;flag = !flag ; value()&quot;&gt;
  
          &lt;mat-icon&gt;menu&lt;/mat-icon&gt;
      &lt;/button&gt;
      &lt;a class=&quot;a-menu&quot;&gt;
          &lt;h1 class=&quot;h1-menu&quot;&gt;Notes&lt;/h1&gt;
      &lt;/a&gt;
      &lt;span class=&quot;example-spacer&quot;&gt;&lt;/span&gt;
      &lt;button mat-raised-button routerLink=&quot;/login&quot;  routerLinkActive=&quot;active&quot; (click)=&quot;openDialog(0)&quot;&gt;Login&lt;/button&gt;
      &amp;nbsp;
      &lt;button mat-raised-button routerLink=&quot;/signin&quot; routerLinkActive=&quot;active&quot;  (click)=&quot;openDialog(1)&quot;&gt;Sign In&lt;/button&gt;
  &lt;/mat-toolbar&gt;
  
  &lt;!--app-navbar (valueChange)='sb.toggleCustom($event)'&gt;&lt;/app-navbar--&gt;
  &lt;!--this is nothing--&gt;
  
  &lt;app-sidebar [flag]=&quot;flag&quot;&gt;&lt;/app-sidebar&gt;
  </code></pre>
  <p>Dialog.component.html ( template for dialog )</p>
  <pre><code>&lt;mat-dialog-content class=&quot;mat-typography&quot;&gt;
  
  
      &lt;mat-tab-group [selectedIndex]=&quot;selected&quot;&gt;
          &lt;mat-tab *ngFor=&quot;let tab of tabs; let index = index&quot; [label]=&quot;tab&quot;&gt;
              &lt;app-login *ngIf=&quot;tab == 'Login'&quot;&gt;&lt;/app-login&gt;
              &lt;app-signin *ngIf=&quot;tab == 'Sign in'&quot;&gt;&lt;/app-signin&gt;
          &lt;/mat-tab&gt;
          
      &lt;/mat-tab-group&gt;
  
  
  &lt;/mat-dialog-content&gt;
  &lt;mat-dialog-actions align=&quot;end&quot;&gt;
      &lt;button mat-button mat-dialog-close&gt;Cancel&lt;/button&gt;
      &lt;button mat-button [mat-dialog-close]=&quot;true&quot; cdkFocusInitial&gt;{{selected == 0 ? 'Login' : 'Sign In'}}&lt;/button&gt;
  &lt;/mat-dialog-actions&gt;
  </code></pre>
  <p>app.module.ts</p>
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import {BrowserAnimationsModule } from '@angular/platform-browser/animations'
  import { NgModule } from '@angular/core';
  
  import {A11yModule} from '@angular/cdk/a11y';
  import {ClipboardModule} from '@angular/cdk/clipboard';
  import {DragDropModule} from '@angular/cdk/drag-drop';
  import {PortalModule} from '@angular/cdk/portal';
  import {ScrollingModule} from '@angular/cdk/scrolling';
  import {CdkStepperModule} from '@angular/cdk/stepper';
  import {CdkTableModule} from '@angular/cdk/table';
  import {CdkTreeModule} from '@angular/cdk/tree';
  import {MatAutocompleteModule} from '@angular/material/autocomplete';
  import {MatBadgeModule} from '@angular/material/badge';
  import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
  import {MatButtonModule} from '@angular/material/button';
  import {MatButtonToggleModule} from '@angular/material/button-toggle';
  import {MatCardModule} from '@angular/material/card';
  import {MatCheckboxModule} from '@angular/material/checkbox';
  import {MatChipsModule} from '@angular/material/chips';
  import {MatStepperModule} from '@angular/material/stepper';
  import {MatDatepickerModule} from '@angular/material/datepicker';
  import {MatDialogModule} from '@angular/material/dialog';
  import {MatDividerModule} from '@angular/material/divider';
  import {MatExpansionModule} from '@angular/material/expansion';
  import {MatGridListModule} from '@angular/material/grid-list';
  import {MatIconModule} from '@angular/material/icon';
  import {MatInputModule} from '@angular/material/input';
  import {MatListModule} from '@angular/material/list';
  import {MatMenuModule} from '@angular/material/menu';
  import {MatNativeDateModule, MatRippleModule} from '@angular/material/core';
  import {MatPaginatorModule} from '@angular/material/paginator';
  import {MatProgressBarModule} from '@angular/material/progress-bar';
  import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
  import {MatRadioModule} from '@angular/material/radio';
  import {MatSelectModule} from '@angular/material/select';
  import {MatSidenavModule} from '@angular/material/sidenav';
  import {MatSliderModule} from '@angular/material/slider';
  import {MatSlideToggleModule} from '@angular/material/slide-toggle';
  import {MatSnackBarModule} from '@angular/material/snack-bar';
  import {MatSortModule} from '@angular/material/sort';
  import {MatTableModule} from '@angular/material/table';
  import {MatTabsModule} from '@angular/material/tabs';
  import {MatToolbarModule} from '@angular/material/toolbar';
  import {MatTooltipModule} from '@angular/material/tooltip';
  import { MatTreeModule } from '@angular/material/tree';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';
  
  import { Routes, RouterModule } from '@angular/router'; // CLI imports router
  import { AppComponent } from './app.component';
  import { NavbarComponent, DialogComponent } from './navbar/navbar.component';
  import { SidebarComponent } from './sidebar/sidebar.component';
  import { SigninComponent } from './signin/signin.component';
  import { LoginComponent } from './login/login.component';
  import { MainComponent } from './main/main.component';
  import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
  
  
  
  const routes: Routes = [
    { path: '', component: NavbarComponent },
    { path: 'login', component: NavbarComponent },
    { path: 'signin', component: NavbarComponent },
    { path: '**', component: PageNotFoundComponent },
  ]; // sets up routes constant where you define your routes
  
  @NgModule({
    declarations: [
      AppComponent,
      NavbarComponent,
      SidebarComponent,
      DialogComponent,
      SigninComponent,
      LoginComponent,
      MainComponent,
      PageNotFoundComponent
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      A11yModule,
      ClipboardModule,
      CdkStepperModule,
      CdkTableModule,
      CdkTreeModule,
      DragDropModule,
      MatAutocompleteModule,
      MatBadgeModule,
      MatBottomSheetModule,
      MatButtonModule,
      MatButtonToggleModule,
      MatCardModule,
      MatCheckboxModule,
      MatChipsModule,
      MatStepperModule,
      MatDatepickerModule,
      MatDialogModule,
      MatDividerModule,
      MatExpansionModule,
      MatGridListModule,
      MatIconModule,
      MatInputModule,
      MatListModule,
      MatMenuModule,
      MatNativeDateModule,
      MatPaginatorModule,
      MatProgressBarModule,
      MatProgressSpinnerModule,
      MatRadioModule,
      MatRippleModule,
      MatSelectModule,
      MatSidenavModule,
      MatSliderModule,
      MatSlideToggleModule,
      MatSnackBarModule,
      MatSortModule,
      MatTableModule,
      MatTabsModule,
      MatToolbarModule,
      MatTooltipModule,
      MatTreeModule,
      PortalModule,
      ScrollingModule,
      FormsModule,
      ReactiveFormsModule,
      RouterModule.forRoot(routes)
  
  
    ],
    exports: [RouterModule],
    providers: [
      { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } },
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>Default View</p>
  <p><a href="https://i.stack.imgur.com/coJAJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/coJAJ.png" alt="Default View" /></a></p>
  <p>On Click Login</p>
  <p><a href="https://i.stack.imgur.com/mwmFc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mwmFc.png" alt="Dialog Box Opened for Login" /></a></p>
  <p>Manually Typing URL</p>
  <p><a href="https://i.stack.imgur.com/5lJC8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5lJC8.png" alt="Manually Typing https://localhost:3200/login" /></a></p>
  <p>Output (without Dialog Box pop Up But <strong>URL changed</strong>)</p>
  <p><a href="https://i.stack.imgur.com/mlVC8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mlVC8.png" alt="Normal View No change" /></a></p>