rakia

deleteTodoForm(formIndex: number) {
    this.typeChangesUnsubscriptions[formIndex].unsubscribe();
    this.todosFormArray.removeAt(formIndex);
    this.todosFormArray.controls.forEach((formGroup, index) => {
      formGroup.get('index').setValue(index, {onlySelf: true, emitEvent: false});
    });
  }

rakia

import { Subject, Subscription } from 'rxjs';
import { takeUntil             } from 'rxjs/operators';

export class TodoDialog implements OnInit, OnDestroy {
  destroy$: Subject<boolean> = new Subject<boolean>();
  typeChangesUnsubscriptions: Subscription[] = [];
    
   ngOnInit() {
    this.todoService.getTodos().pipe(takeUntil(this.destroy$)).subscribe(todos => {
      // ...

rakia

<mat-form-field>
    <mat-label>Depends on</mat-label>
    <mat-select formControlName="dependencies">
        <mat-option *ngFor="let todo of (dependencies | filterPerType: item.get('type').value)" [value]="todo">
            {{todo.name}}
        </mat-option>
     </mat-select>
</mat-form-field>

rakia

import { Pipe, PipeTransform } from '@angular/core';
import { TODO } from './todo.model';

@Pipe({
  name: 'filterPerType',
  pure: true
})
export class FilterPerTypePipe implements PipeTransform {

  transform(allTodos: TODO[], type: string): TODO[] {

rakia

@Component({
  selector: 'todo.dialog',
  templateUrl: 'todo.dialog.html',
  styleUrls: ['./todo.dialog.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodoDialog implements OnInit {

  todosForm:        FormGroup;
  type:             string;

rakia

import {TODO} from '../todo.model';

export interface TodoDialogData {
  todos?: TODO[];
  dependencies: TODO[];
  types: string[];
  mode: string; // 'create' | 'update'
}

rakia

.todo-list {
  margin: 10px;
}

.todo-card {
  min-width: 300px;
  max-width: 300px;
  margin-bottom: 15px;
}

rakia

import { ChangeDetectionStrategy, Component, Inject, OnDestroy, OnInit } from '@angular/core';

@Component({
  selector: 'todo.dialog',
  templateUrl: 'todo.dialog.html',
  styleUrls: ['./todo.dialog.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodoDialog implements OnInit, OnDestroy { /* ... */ }

rakia

  "name": "angular-memory-leaks",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"

rakia

import { Component, OnDestroy } from '@angular/core';
import { MatDialog            } from '@angular/material/dialog';
import { Subject              } from 'rxjs';
import { takeUntil            } from 'rxjs/operators';

import { UserSelectionDialog  } from './user-selection/user-selection-dialog.component';
import { User                 } from '../../models/user.model';
import { UserService          } from '../../services/user.service';

@Component({