rakia

export interface TODO {
  id:            number;
  name:          string;
  type:          string; // = 'Coding' | 'Reading' | 'Writing';
  description?:  string;
  dependencies?: TODO;
}

@Component({
  selector: 'app-todo-list',

rakia

<h1 mat-dialog-title>Create new TODO</h1>

<div mat-dialog-content [formGroup]="todoForm">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input formControlName="name" matInput required/>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Select a type</mat-label>

rakia

export interface TodoDialogData {
  todo?: TODO;
  mode: string; // 'create' | 'update'
}

@Component({
  selector: 'todo.dialog',
  templateUrl: 'todo.dialog.html',
  styleUrls: ['./todo.dialog.css']
})

rakia

@NgModule({
  declarations: [ AppComponent, TodoListComponent, TodoDialog ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    RouterModule.forRoot([{path: '', component: TodoListComponent}]),
    MatListModule,
    MatButtonModule,
    MatCardModule,

rakia

<div class="container">
  <router-outlet></router-outlet>
</div>

rakia

@Injectable({
  providedIn: 'root'
})
export class TodoService {

  todoList: TODO[];
  types: string[];

  constructor() {}

rakia

export class TodoDialog implements OnInit {

  todosForm:        FormGroup;
  type:             string;
  types:            string[] = [];
  todoList:         TODO[]   = [];
  filteredTodoList: TODO[]   = [];
  mode:             string   = 'create'; // 'create' | 'update'

  constructor(private formBuilder: FormBuilder,

rakia

<div mat-dialog-content>
  <div fxLayout="row" fxLayoutGap="10px">

  <form [formGroup]="todosForm">
    <div formArrayName="todos" *ngFor="let item of todosFormArray.controls; let i = index;">

      <div fxLayout="row" [formGroupName]="i" fxLayoutAlign="start center">
        <mat-form-field>
          <mat-label>Name</mat-label>
          <input formControlName="name" matInput required/>

rakia

openTodoDialog(mode: string, todo?: TODO): void { // mode = 'create' | 'update'
    const dialogRef = this.dialog.open(TodoDialog, {
      width: '800px',
      data: { mode: mode, todos: todo ? [todo] : [] }
    });
    dialogRef.afterClosed().subscribe((result: TODO[]) => {
      if (result) {
        this.todoService.updateTodoList(result, mode);
      }
    });

rakia

updateTodoList(todos: TODO[], mode: string) {
    // if the todo-dialog is opened with 'update' mode, it will contain only 1 TODO
    if (mode === 'update') {
      this.todoList[todos[0].id - 1] = todos[0];
    }

    if (mode === 'create') {
      todos.forEach(todo => {
        todo.id = this.todoList.length + 1;
        this.todoList.push(todo);