title: Passing id as a parameter in URL from component to Angular material dialog
body: <p>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?</p>
  <h3>Component.ts:</h3>
  <pre><code>openModal(id : number): void {
      const dialogRef = this.dialog.open(UpdateRowComponent, {
      });
  
      dialogRef.afterClosed().subscribe((result:string) =&gt; {
          this.router.navigate(['UpdateRowComponent',id]);
  
          console.log('The dialog was closed');
          console.log(result);
      });
  }
  </code></pre>
  <p>UpdateRowComponent.ts (Dialog box): Not used services. Directly perfomed operation inside component</p>
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
  import { Http,Response,Headers } from &quot;@angular/http&quot;;
  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 = &quot;&quot;;
      id:number;
      Data:object = {};
      spf = [];
      exist = false;
      productObj:object = {};
      private headers = new Headers({ 'Content-Type': 'application/json'});
  
      constructor(private http: Http, public dialogRef   :MatDialogRef&lt;UpdateRowComponent &gt;,private dialog: DialogService,private router:Router,private route:ActivatedRoute,
      @Inject(MAT_DIALOG_DATA) public data: any) { }
  
  ngOnInit() {
      this.route.params.subscribe(params =&gt; {
          this.id = +params['id'];
      });
      this.http.get(&quot;http://localhost:4000/Table/&quot;).subscribe(
          (res: Response) =&gt; {
              this.spf = res.json();
              for(var i = 0; i &lt; 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 = {
          &quot;Status&quot;: user.status
      };
      const url = `${&quot;http://localhost:4000/Table/&quot;}/${this.id}`;
      this.http.put(url, JSON.stringify(this.productObj), {headers: this.headers})
          .toPromise()
          .then(() =&gt; {
            this.router.navigate(['/dashboard']);
          })
      }
  }
  </code></pre>
  <p>Routes:</p>
  <pre><code>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},
  ];
  </code></pre>