CODEWITHSUNDEEP
angularroutesdialog
Bhoomi Bhalani
Bhoomi Bhalani

Reputation: 295

how to do normal routing with mdDialogref in angular 4?

import { Component, NgModule } from '@angular/core';
import { MdDialog } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Product } from '../../models';
import { ProductService } from '../../services/product.service';
import { MdDialogRef } from '@angular/material';
@Component({
    selector: 'product',
    template: `
    <button mdButton class="md-fab md-primary md-hue-2 addProduct" aria-label="Profile" (click)="openDialog()" >
        add
    </button>
    `
})
export class ProductComponent {
    constructor(public dialog: MdDialog, public dialogRef: MdDialogRef<AddProductComponent>) { }
    openDialog() {
        this.dialogRef = this.dialog.open(AddProductComponent);
    }
}

@Component({
    selector: 'addproduct',
    template: require('./add.product.html'),
})
export class AddProductComponent {
    constructor(public productService: ProductService, public dialogRef: MdDialogRef<AddProductComponent>) {
    }



    addProduct(product: Product) {
        this.productService.addProduct(product).subscribe(() => {
            this.dialogRef.close();
            //this.productService.getAllProducts();
        });
    }
}

This works perfect for me but When I use in logincomponent 

this.router.navigate(['/product']);

It throws me error of

ERROR Error: Uncaught (in promise): Error: No provider for MdDialogRef!

When I go through this question on stackoverflow :

"No provider for MdDialogRef!" 

that tells that we should not use component by <product></product>.But I need to call product component when I get success of login.So How do I do normal routing with mdDialogRef ?

Upvotes: 0

Views: 2409

Answers (1)

rsirs
rsirs

Reputation: 107

I have tried using componentInstance property of MdDialogRef. It works great:

import { Component, NgModule } from '@angular/core';
import { MdDialog } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Product } from '../../models';
import { ProductService } from '../../services/product.service';
import { MdDialogRef } from '@angular/material';
@Component({
    selector: 'product',
    template: `
    <button mdButton class="md-fab md-primary md-hue-2 addProduct" aria-label="Profile" (click)="openDialog()" >
        add
    </button>
    `
})
export class ProductComponent {
    constructor(public dialog: MdDialog) { }
    openDialog() {
        let dialogRef = this.dialog.open(AddProductComponent);

        //Set the dialogRef property of opened dialog with the obtained ref
        dialogRef.componentInstance.dialogRef = dialogRef;
    }
}

@Component({
    selector: 'addproduct',
    template: require('./add.product.html'),
})
export class AddProductComponent {
    public dialogRef:<any> = null; 
    constructor(public productService: ProductService) {
    }



    addProduct(product: Product) {
        this.productService.addProduct(product).subscribe(() => {
            this.dialogRef.close();
            //this.productService.getAllProducts();
        });
    }
}

Upvotes: 1

Related Questions