Routing in matdialog in Angular

Question

I am trying to add routing to a Angular Material Mat Dialog in angular. But there is an problem occurring.

When I try to add the route URL manually from

https://localhost:3200

to

https://localhost:3200/login

or

https://localhost:3200/signin

it don't pop up

Tab Switching Problem

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

Navbar.component.ts ( Dialog Initializing Component )

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<any> = 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 => {
      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 -> tabs[0] -> Login and 1 -> tabs[1] -> SignIn
  selected = this.data.tabvalue
}

Navbar.component.html ( template for above code )

<mat-toolbar mat-toolbar [routerLink]="['/']">

    <button mat-icon-button (click)="flag = !flag ; value()">

        <mat-icon>menu</mat-icon>
    </button>
    <a class="a-menu">
        <h1 class="h1-menu">Notes</h1>
    </a>
    <span class="example-spacer"></span>
    <button mat-raised-button routerLink="/login"  routerLinkActive="active" (click)="openDialog(0)">Login</button>
    &nbsp;
    <button mat-raised-button routerLink="/signin" routerLinkActive="active"  (click)="openDialog(1)">Sign In</button>
</mat-toolbar>

<!--app-navbar (valueChange)='sb.toggleCustom($event)'></app-navbar-->
<!--this is nothing-->

<app-sidebar [flag]="flag"></app-sidebar>

Dialog.component.html ( template for dialog )

<mat-dialog-content class="mat-typography">


    <mat-tab-group [selectedIndex]="selected">
        <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
            <app-login *ngIf="tab == 'Login'"></app-login>
            <app-signin *ngIf="tab == 'Sign in'"></app-signin>
        </mat-tab>
        
    </mat-tab-group>


</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>{{selected == 0 ? 'Login' : 'Sign In'}}</button>
</mat-dialog-actions>

app.module.ts

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 { }

Default View

On Click Login

Manually Typing URL

Output (without Dialog Box pop Up But URL changed)

You are requesting to open dialog box from Navbar.component.ts through this.dialog.open(). When you enter url, it is not triggering openDialog function in navbar.compoent.ts. That is the reason it is not opening dialog box when you enter url. And my suggestion to you is not to change url every time you change tab. Try making it single page application and change url only when user logs in. — Eranki, Jul 20 '20 at 07:50
I know that openDialog function is not triggering But why it's not triggering that is what i want to know — Mohit Kumar, Jul 20 '20 at 08:53
Which component are you redirecting that url to? Did you add something in routes.ts? — Eranki, Jul 20 '20 at 08:54
Add your dialog component in routes.ts if you haven't. And remember, even after adding it in routes you will not get pop up. It'll render dialog component on your page. — Eranki, Jul 20 '20 at 08:59
why, I linked login button with OpenDialog() when i call the route login. OpenDialog should be triggered — Mohit Kumar, Jul 20 '20 at 09:02
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/218195/discussion-between-mohit-kumar-and-maruthi-eranki). — Mohit Kumar, Jul 20 '20 at 09:18

score 2 · Accepted Answer · edited May 05 '21 at 20:42

2

You need to import and declare the dialog component in "declarations" section. Then add the property "entryComponents" with the dialog component in "app.module.ts" file.

import { YourDialog} from './modules/YourDialog.component';

@NgModule({
  declarations: [...., YourDialog], 
  entryComponents: [YourDialog,]
})

edited May 05 '21 at 20:42

Nicholas Franceschina

6,009
6
36
51

answered Jul 20 '20 at 06:48

Prajeesh S Prakash

36
2

Install angular material and and add "deeppurple-amber.css" in angular.json, under "styles" attribute. "styles": [ "src/styles.scss", "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" ] – Prajeesh S Prakash Jul 20 '20 at 07:20

Routing in matdialog in Angular

1 Answers1