CODEWITHSUNDEEP
angularangular-material
shoopik
shoopik

Reputation: 309

angular2 routing in mdDialog

I am trying to do routing in mdDialog, here is pnlkr: https://plnkr.co/edit/iTtq3HtDim0OsnJPKmW2?p=preview

I create two dialogs, and for example, when i click whatch photos, it should open photos of user in the same dialog.

module.ts:

 import { RouterModule, Routes } from '@angular/router';
    const appRoutes: Routes = [
      { path: '', component: DialogOverviewExample },
      {
    path: 'photos',
    component: DialogOver,
  },

  { path: '**', component: DialogOverviewExample }
];

Where is 'photos' is the dialog containing photos.

In the first dialog, i set routerLink to button named "whatch photos":

<div md-dialog-actions>
  <button md-button routerLink="/photos"  tabindex="2">Watch Photos</button>
  <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>

And it should open second dialog with photos, but it does not... And there is error:

ERROR Error: No provider for Router!

the whole module.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
import {
  MdAutocompleteModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdCardModule,
  MdCheckboxModule,
  MdChipsModule,
  MdDatepickerModule,
  MdDialogModule,
  MdExpansionModule,
  MdGridListModule,
  MdIconModule,
  MdInputModule,
  MdListModule,
  MdMenuModule,
  MdNativeDateModule,
  MdPaginatorModule,
  MdProgressBarModule,
  MdProgressSpinnerModule,
  MdRadioModule,
  MdRippleModule,
  MdSelectModule,
  MdSidenavModule,
  MdSliderModule,
  MdSlideToggleModule,
  MdSnackBarModule,
  MdSortModule,
  MdTableModule,
  MdTabsModule,
  MdToolbarModule,
  MdTooltipModule,
  MdStepperModule,
} from '@angular/material';
import {DialogOverviewExample, DialogOverviewExampleDialog, DialogOver} from './dialog-overview-example';
import {HttpModule} from '@angular/http';
import {CdkTableModule} from '@angular/cdk/table';


const appRoutes: Routes = [
  { path: '', component: DialogOverviewExample },
  {
    path: 'photos',
    component: DialogOver,
  },

  { path: '**', component: DialogOverviewExample }
];



@NgModule({
  exports: [
    CdkTableModule,
    MdAutocompleteModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdCardModule,
    MdCheckboxModule,
    MdChipsModule,
    MdStepperModule,
    MdDatepickerModule,
    MdDialogModule,
    MdExpansionModule,
    MdGridListModule,
    MdIconModule,
    MdInputModule,
    MdListModule,
    MdMenuModule,
    MdNativeDateModule,
    MdPaginatorModule,
    MdProgressBarModule,
    MdProgressSpinnerModule,
    MdRadioModule,
    MdRippleModule,
    MdSelectModule,
    MdSidenavModule,
    MdSliderModule,
    MdSlideToggleModule,
    MdSnackBarModule,
    MdSortModule,
    MdTableModule,
    MdTabsModule,
    MdToolbarModule,
    MdTooltipModule,
    RouterModule,
  ]
})
export class PlunkerMaterialModule {}

@NgModule({

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    PlunkerMaterialModule,
    MdNativeDateModule,
    ReactiveFormsModule,

  ],

  declarations: [DialogOverviewExample, DialogOverviewExampleDialog, DialogOver],
  bootstrap: [DialogOverviewExample, DialogOverviewExampleDialog, DialogOver],
  providers: [
   RouterModule
  ],
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

Upvotes: 2

Views: 1551

Answers (2)

Edric
Edric

Reputation: 26821

I found some problems in your code which caused the issue:

  1. Wrong placing of the RouterModule (Take note that RouterModule is a NgModule and not a Provider)
  2. No entryComponents for the dialogs (since they are dynamically rendered)
  3. Missing router-outlet (What @SalimIbrogimov said, but he placed the element in the wrong part of the dialog)

Here's the updated code:

main.ts:

const appRoutes: Routes = [
    {
        path: 'photos',
        component: DialogOver,
    }
];

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpModule,
        PlunkerMaterialModule,
        MdNativeDateModule,
        ReactiveFormsModule,
        // Over here
        RouterModule.forRoot(appRoutes)

    ],

    declarations: [
        DialogOverviewExample,
        DialogOverviewExampleDialog,
        DialogOver
    ],
    bootstrap: [
        DialogOverviewExample
    ],
    entryComponents: [
        DialogOverviewExampleDialog,
        DialogOver
    ]
})
export class PlunkerAppModule {}

dialog-overview-example-dialog.html:

<h3 md-dialog-title>Test</h3>
<div md-dialog-content>
    <router-outlet></router-outlet>
</div>
<div md-dialog-actions *ngIf="router.url != '/photos'">
    <button md-button routerLink="/photos"  tabindex="2">Watch Photos</button>
    <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>

dialog-overview-example.ts: [Excerpt]

@Component({
    selector: 'dialog-overview-example-dialog',
    templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

    constructor(
        public dialogRef: MdDialogRef<DialogOverviewExampleDialog>, @Inject(MD_DIALOG_DATA) public data: any, public router: Router) {}
    onNoClick(): void {
        this.dialogRef.close();
    }

}

Updated plunker

Upvotes: 1

Salim Ibrohimi
Salim Ibrohimi

Reputation: 1391

I think You need include <router-outlet></router-outlet> in Your first mdDialog:

<div md-dialog-actions>
  <button md-button routerLink="/photos"  tabindex="2">Watch Photos</button>
  <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
  <router-outlet></router-outlet>
</div>

Upvotes: 1

Related Questions