Passing id as a parameter in URL from component to Angular material dialog

Question

I am trying to perform edit operations inside an Angular material dialog. I can't perform edit operations since I am not able to get a parameter from the URL. How do I pass id as a parameter from the current component to the Dialog component?

Component.ts:

openModal(id : number): void {
    const dialogRef = this.dialog.open(UpdateRowComponent, {
    });

    dialogRef.afterClosed().subscribe((result:string) => {
        this.router.navigate(['UpdateRowComponent',id]);

        console.log('The dialog was closed');
        console.log(result);
    });
}

UpdateRowComponent.ts (Dialog box): Not used services. Directly perfomed operation inside component

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Http,Response,Headers } from "@angular/http";
import { ActivatedRoute, Router } from '@angular/router';

@Component({
    selector: 'app-update-row',
    templateUrl: './update-row.component.html',
    styleUrls: ['./update-row.component.css']
})
export class UpdateRowComponent implements OnInit {
    userId:string = "";
    id:number;
    Data:object = {};
    spf = [];
    exist = false;
    productObj:object = {};
    private headers = new Headers({ 'Content-Type': 'application/json'});

    constructor(private http: Http, public dialogRef   :MatDialogRef<UpdateRowComponent >,private dialog: DialogService,private router:Router,private route:ActivatedRoute,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

ngOnInit() {
    this.route.params.subscribe(params => {
        this.id = +params['id'];
    });
    this.http.get("http://localhost:4000/Table/").subscribe(
        (res: Response) => {
            this.spf = res.json();
            for(var i = 0; i < this.spf.length ; i++) {
                if(parseInt(this.spf[i].id) === this.id) {
                    this.exist = true;
                    this.Data = this.spf[i];
                    break;
                }
                else {
                    this.exist = false;
                }
            }
        }
    )
}

update(user) {
    this.productObj = {
        "Status": user.status
    };
    const url = `${"http://localhost:4000/Table/"}/${this.id}`;
    this.http.put(url, JSON.stringify(this.productObj), {headers: this.headers})
        .toPromise()
        .then(() => {
          this.router.navigate(['/dashboard']);
        })
    }
}

Routes:

import import { UpdateRowComponent } from './update-row/update-row.component';
import { CurrentComponent } from './update-row/update-row.component';

const appRoutes: Routes = [
    {path: 'currentComp',component: CurrentComponent},
    {path: 'update/:id',component: UpdateRowComponent},
];

Please add code for your route config as well. – SiddAjmera Oct 22 '18 at 06:59 — SiddAjmera, Oct 22 '18 at 06:59
OK I will edit in 1 minute. – kedar kulkarni Oct 22 '18 at 07:01 — kedar kulkarni, Oct 22 '18 at 07:01

score 0 · Accepted Answer · edited Jan 01 '19 at 00:51

0

You should have something like this in your dialog component:

 @Inject(MAT_DIALOG_DATA) public data: any

This data can be passed (and can be anything) to the dialog upon opening it. So you can use it (you should) to propagate your Id like this:

  const dialogRef = this.dialog.open(UpdateRowComponent, {
     data:{myId:myIdValue}
});

And it will be available in constructor as

this.data.myId //==myIdValue

edited Jan 01 '19 at 00:51

Peter Mortensen

30,738
21
105
131

answered Oct 22 '18 at 07:05

Antoniossss

31,590
6
57
99

Yep, but how to pass it through URL? – kedar kulkarni Oct 22 '18 at 07:07
Get it in component and pass it on opening, or inject ActiavtedRoute to dialog and get it from there. IDK why do you want to do that via URL, never had to do that and I see no point of doing it that way. – Antoniossss Oct 22 '18 at 07:09
DK why do you want to do that via URL : Because I need to perfrom edit operation. I need to use snapshot on id and the perform operations on it . I DK how to edit using post. – kedar kulkarni Oct 22 '18 at 07:13
Can you explain how to perform edit operation inside Dialog box? Please, it would be helpful. I think I'm missing something. – kedar kulkarni Oct 22 '18 at 07:20
@kedarkulk *Because I need to perfrom edit operation.* but that has nothing to do with dialogs. Routing hits component, and component should open dialog with required params - id in your case. You pass id, "do the edit" by whatever means necessary, save trough service, you are done. – Antoniossss Oct 22 '18 at 07:30
Yes you are right. So no need of id param.I just need to get the values of particaular id into my dialog.Can you give me a simple example for that,just the component part of that – kedar kulkarni Oct 22 '18 at 07:34
No need to forcibly try to pass it via URL to dialog, since you have dedicated mechanism for data injection into dialogs. – Antoniossss Oct 22 '18 at 07:35
Oh God ,I forgot about data injection.I'll just try it out! Thanks – kedar kulkarni Oct 22 '18 at 07:37
Besides you have common scenario that you have list of children in parent view. Then you have something like that in url /posts/details/5 - to see the details of post id 5 with list of comments, but after that, if you want to eg edit a comment, why would you want to pass comment id via url especially that you are not navigating forward to comment editir, but you open popup from list of comments. You just pass id as data to dialog and you are done, no url manipulation needed. – Antoniossss Oct 22 '18 at 07:37
I'm refering to this : https://stackoverflow.com/questions/42664974/how-to-pass-data-to-dialog-of-angular-material-2 – kedar kulkarni Oct 22 '18 at 07:45
And that is exactly what I told you to do - nobody passes parameters via URL to dialog there. – Antoniossss Oct 22 '18 at 07:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/182251/discussion-between-kedar-kulk-and-antoniossss). – kedar kulkarni Oct 22 '18 at 09:20

Passing id as a parameter in URL from component to Angular material dialog

Component.ts:

1 Answers1