title: Edit the form data in a modal dialog
body: <p>Please help me fix the error described below.</p>
  
  <p>I am having the list of data in a table which on edit displays a dialog as shown in the screenshots:
  <img src="https://i.stack.imgur.com/LBMEd.png" alt="Screenshot1">
  <img src="https://i.stack.imgur.com/0es19.png" alt="Screenshot2"></p>
  
  <p>I am Passing an id with my dialog <code>openDialogEdit()</code>. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button md-mini-fab class="example-fab" color="primary" (click)= "openDialogEdit(role.id);"&gt;
  </code></pre>
  
  <p><code>RolesComponent(MdDialog)</code>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>export class RolesComponent implements OnInit {
      @Input() role: Role;
      @Output() roleDeleted = new EventEmitter&lt;Role&gt;();
      id: number;
    role_name: string;
    status: boolean;
  
  
    constructor( private roleService: RoleService, public dialog: MdDialog ) { }
  
      roles: Role[];
  
    ngOnInit() {
      this.onRoles()
    }
    onDelete() {
      this.roleService.deleteRole(this.role.id) 
        .subscribe(
          () =&gt; {
              this.roleDeleted.emit(this.role)
              console.log('Roles Deleted');
          }
        );
    }
  
    onRoles() {
      this.roleService.Roles() 
          .subscribe(
              (roles: Role[]) =&gt; this.roles = roles,
              (error: Response) =&gt; console.log(error)
          );
    }
    onDeleted( role: Role) {
      const position = this.roles.findIndex(
        (roleEl: Role) =&gt; {
  
  
          return roleEl.id == role.id;
        }
       );
      this.roles.splice(position, 1);
  
    }
    openDialogEdit(id) {
      console.log(this.id);
      alert(this.id);
      return this.dialog.open(RoleEditForm, this.id);
    }
  }
  </code></pre>
  
  <p><code>RolesComponent(MdDialogRef)</code>:</p>
  
  <pre class="lang-ts prettyprint-override"><code>export class RoleEditForm {
    @Input() role: Role;
    @Output() roleDeleted = new EventEmitter&lt;Role&gt;();
    id: number;
    role_name: string;
    status: boolean;
    // id = this.role.id;
    // role_name = this.role.role_name;
    // status = this.role.status;
    constructor(private roleService : RoleService, public dialogRef: MdDialogRef&lt;RoleEditForm&gt;) {  }
  
    ngOnInit() {
      this.onEdit();
    }
    onEdit() {
  
  
      this.dialogRef.componentInstance.id = this.role.id;
      this.dialogRef.componentInstance.role_name = this.role.role_name;
      this.dialogRef.componentInstance.status = this.role.status;
    }
    onCancel() {
      this.dialogRef.close();
    }
    onUpdate() {
      this.roleService.updateRole( this.id, this.role_name, this.status)
        .subscribe(
            (role: Role) =&gt; {
              this.role.id = this.id;
              this.id = 0;
              this.role.role_name = this.role_name;
              this.role_name = '';
              this.role.status = this.status;
              this.status = false;
            }
         );
    }
  }
  </code></pre>
  
  <p><code>Editable form</code>: </p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;form #f="ngForm" (ngSubmit) = "onUpdate(f)"&gt;
          &lt;h1 md-dialog-title&gt;Dialog&lt;/h1&gt;
          &lt;div md-dialog-content&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;md-input-container class="example-full-width"&gt;
                        &lt;input mdInput type="text" id="role_name" name="role_name" [(ngModel)]="role.role_name" #role_name  ngControl="role_name" placeholder="Role Name"&gt;
                      &lt;/md-input-container&gt;
                  &lt;/div&gt;
  
  
                  &lt;md-slide-toggle
                    class="example-margin"
                    [color]="color"
                    [checked]="checked"
                    [disabled]="disabled"&gt;
                  Is Active?
                  &lt;/md-slide-toggle&gt;
  
          &lt;/div&gt;
          &lt;div md-dialog-actions&gt;
              &lt;button type="button" class="btn btn-primary" (click)= "onUpdate()"&gt;Save&lt;/button&gt;
              &lt;button type="button" class="btn btn-primary" (click)= "onCancel()"&gt;Cancel&lt;/button&gt; 
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>I tried displaying the <code>id</code> that is passed in the function <code>openDialogEdit()</code> but i am getting the value <code>undefined</code> in the console and because of which my edit form fields are empty. </p>