title: Pass data to angular material dialog for editing
body: <p>For my todo app I wan't the ability to edit existing todo's. To do that I've created a material dialog and I'm also able to pass the existing data to the dialog to be used as the placeholder. My problem ist to pass the edited data back to the backend.</p>
  
  <p>The edit dialog HTML:</p>
  
  <pre><code>&lt;h1 mat-dialog-title&gt;Edit Todo&lt;/h1&gt;
  
  &lt;div mat-dialog-content&gt;
      &lt;mat-form-field&gt;
          &lt;input matInput type="text" placeholder="{{data.todoUpdate.taskName}}" [(ngModel)]="toDoData.taskName" required&gt;
      &lt;/mat-form-field&gt;
  
  
      &lt;mat-form-field&gt;
          &lt;input matInput type="date" placeholder="{{data.todoUpdate.dueDate}}" [(ngModel)]="toDoData.dueDate" required&gt;
      &lt;/mat-form-field&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;mat-form-field class="full-width"&gt;
          &lt;input matInput type="text" placeholder="{{data.todoUpdate.extraNote}}" [(ngModel)]="toDoData.extraNote"&gt;
      &lt;/mat-form-field&gt;
  &lt;/div&gt;
  
  &lt;div mat-dialog-actions&gt;
      &lt;button mat-button&gt;Cancel&lt;/button&gt;
      &lt;button mat-button (click)="updateToDo(data.toDoData.extra, data.toDoData)"&gt;Update&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>edit dialog TS:</p>
  
  <pre><code>import {Component, Inject, Input, OnInit} from '@angular/core';
  import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
  import {TodoService} from '../shared/todo.service';
  
  @Component({
      selector: 'app-edit-to-do-dialog',
      templateUrl: './edit-to-do-dialog.component.html',
      styleUrls: ['./edit-to-do-dialog.component.css']
  })
  export class EditToDoDialogComponent implements OnInit {
  
      @Input() toDoData = {taskName: '', extraNote: '', taskCompleted: false, dueDate: Date};
  
      constructor(
          public dialogRef: MatDialogRef&lt;EditToDoDialogComponent&gt;,
          @Inject(MAT_DIALOG_DATA) public data: any, private todoService: TodoService) {
      }
  
  
  
  
      ngOnInit() {
      }
  
      updateToDo(id, todo) {
          this.dialogRef.close();
          this.toDoData.taskName = this.data.taskName;
          this.toDoData.extraNote = this.data.extraNote;
          this.toDoData.dueDate = this.data.dueData;
  
  
          console.log(id);
          console.log(todo);
  
          this.todoService.updateToDo(id, todo).subscribe((res) =&gt; {
  
          }, (err) =&gt; {
              console.log(err);
          });
      }
  }
  </code></pre>
  
  <p>The todo item which should be edited comes from the todo-list-component. Hope this code helps to understand what my plan was.
  HTML:</p>
  
  <pre><code>import {Component, Inject, Input, OnInit} from '@angular/core';
  import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
  import {TodoService} from '../shared/todo.service';
  
  @Component({
      selector: 'app-edit-to-do-dialog',
      templateUrl: './edit-to-do-dialog.component.html',
      styleUrls: ['./edit-to-do-dialog.component.css']
  })
  export class EditToDoDialogComponent implements OnInit {
  
      @Input() toDoData = {taskName: '', extraNote: '', taskCompleted: false, dueDate: Date};
  
      constructor(
          public dialogRef: MatDialogRef&lt;EditToDoDialogComponent&gt;,
          @Inject(MAT_DIALOG_DATA) public data: any, private todoService: TodoService) {
      }
  
  
  
  
      ngOnInit() {
      }
  
      updateToDo(id, todo) {
          this.dialogRef.close();
          this.toDoData.taskName = this.data.taskName;
          this.toDoData.extraNote = this.data.extraNote;
          this.toDoData.dueDate = this.data.dueData;
  
  
          console.log(id);
          console.log(todo);
  
          this.todoService.updateToDo(id, todo).subscribe((res) =&gt; {
  
          }, (err) =&gt; {
              console.log(err);
          });
      }
  }
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>import {Component, Input, OnInit} from '@angular/core';
  import {TodoService} from '../shared/todo.service';
  import {MatDialog} from '@angular/material';
  import {EditToDoDialogComponent} from '../edit-to-do-dialog/edit-to-do-dialog.component';
  
  @Component({
      selector: 'app-todo-list',
      templateUrl: './todo-list.component.html',
      styleUrls: ['./todo-list.component.css']
  })
  export class TodoListComponent implements OnInit {
  
      todoList: Array&lt;any&gt;;
  
      constructor(private todoService: TodoService, private dialog: MatDialog) {
      }
  
      @Input() toDoData = {taskName: '', taskCompleted: false, date: Date};
  
  
      ngOnInit() {
          this.getToDos();
      }
  
      getToDos() {
          this.todoList = [];
          this.todoService.getToDos().subscribe((data: []) =&gt; {
              console.log(data);
              this.todoList = data;
          });
      }
  
      delete(id) {
          this.todoService.deleteToDo(id)
              .subscribe(res =&gt; {
                      this.getToDos();
                  }, (err) =&gt; {
                      console.log(err);
                  }
              );
      }
  
      completed(id, todo) {
          todo.taskCompleted = !todo.taskCompleted;
          this.todoService.updateToDo(id, todo)
              .subscribe(res =&gt; {
                  this.getToDos();
              }, (err) =&gt; {
                  console.log(err);
              });
      }
  
      openDialog(todo): void {
          const dialogRef = this.dialog.open(EditToDoDialogComponent, {
              data: {
                  todoUpdate: todo,
              }
          });
  
          dialogRef.afterClosed().subscribe(result =&gt; {
              console.log('The dialog was closed');
          });
      }
  }
  </code></pre>
  
  <p>And lastly the service which connects to my backend:</p>
  
  <pre><code>import {Injectable} from '@angular/core';
  import {HttpClient, HttpHeaders} from '@angular/common/http';
  import {Observable, of} from 'rxjs';
  import {map, catchError, tap} from 'rxjs/operators';
  
  @Injectable({providedIn: 'root'})
  export class TodoService {
      public API = 'http://localhost:8080/';
  
      httpOptions = {
          headers: new HttpHeaders({
              'Content-Type': 'application/json'
          })
      };
  
  
      constructor(private http: HttpClient) {
      }
  
      private extractData(res: Response) {
          const body = res;
          return body || {};
      }
  
      getToDos(): Observable&lt;any&gt; {
          return this.http.get(this.API + 'todos').pipe(
              map(this.extractData));
      }
  
      getToDo(id): Observable&lt;any&gt; {
          return this.http.get(this.API + 'todos/' + id).pipe(
              map(this.extractData));
      }
  
      addToDo(todo): Observable&lt;any&gt; {
          return this.http.post&lt;any&gt;(this.API + 'todos', JSON.stringify(todo), this.httpOptions).pipe(
              tap((todo) =&gt; console.log(`added todo w/ id=${todo.id}`)),
              catchError(this.handleError&lt;any&gt;('addTodo'))
          );
      }
  
      updateToDo(id, todo): Observable&lt;any&gt; {
          return this.http.put(this.API + 'todos/' + id, JSON.stringify(todo), this.httpOptions).pipe(
              tap(_ =&gt; console.log(`updated todo id=${id}`)),
              catchError(this.handleError&lt;any&gt;('updateTodo'))
          );
      }
  
      deleteToDo(id): Observable&lt;any&gt; {
          return this.http.delete&lt;any&gt;(this.API + 'todos/' + id, this.httpOptions).pipe(
              tap(_ =&gt; console.log(`deleted todo id=${id}`)),
              catchError(this.handleError&lt;any&gt;('deleteToDo'))
          );
      }
  
      private handleError&lt;T&gt;(operation = 'operation', result?: T) {
          return (error: any): Observable&lt;T&gt; =&gt; {
              // TODO: send the error to remote logging infrastructure
              console.error(error); // log to console instead
              // TODO: better job of transforming error for user consumption
              console.log(`${operation} failed: ${error.message}`);
              // Let the app keep running by returning an empty result.
              return of(result as T);
          };
      }
  }
  </code></pre>
  
  <p>I might have misunderstood how I should proceed with update jobs...</p>
  
  <p>Thanks for any help!</p>