How to open a modal from an Angular component in page full of multiples components

Question

@import '../../theme/conf';
.edit-input {
    padding: 0 2%;
    width: 100%;
    height: 30px;
    margin: 7px 0;
    background: transparent;
    border: 1px solid $fonts-color;
    outline: none;
    border-radius: 0;
}

.todolist-wrap {
    padding-bottom: 13px;
}

.form-group {
    margin: 0;
    display: flex;
}

.new-task-input {
    display: block;
    margin: 0 10px;
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid $border-color;
    outline: none;
    @include transition(all 1s);
    &:focus {
        border-bottom: 1px solid $primary;
    }
}

.task-list {
    border-radius: 5px;
    @include transition(all 0.4s);
    &:hover {
        background: rgba($primary, .8);
        .edit-input,
        .enter-task-edit,
        .cancel-task-edit {
            border: 1px solid $white;
        }
    }
}

.list-text,
.list-over {
    display: inline-block;
    flex: 1;
    width: 100%;
    height: 39px;
    line-height: 40px;
    text-align: left;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.list-over {
    text-decoration: line-through;
}

.cyclo-btn {
    position: relative;
    top: 19px;
    right: 10px;
}

.over-btn {
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    @include center(40px, 39px);
    .fa-square-o {
        margin-left: -2px;
    }
}

.enter-task-edit,
.cancel-task-edit {
    width: 30px;
    margin: 7px 0;
    background: transparent;
    border: 1px solid $fonts-color;
    border-left: none;
    border-radius: 0;
    outline: none;
    &:hover {
        background: rgba($white, .1);
    }
}

I have tried to launch my modal from an angular component in page with multiple components but unfortunately my application stop working and the application get freezed.

import { Component, OnInit } from '@angular/core';
import { TodoListService } from './todolist.service';
import {Task} from '../../models/task.model';
import swal from "sweetalert2";
@Component({
  selector: 'du-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.scss'],
  providers: [TodoListService]
})

export class TodolistComponent implements OnInit {

  todolist: Array<any> = [];
  newTaskText: string;


  constructor(private todoListService: TodoListService) { }

  ngOnInit() {
    this.todoListService.getTasksByUserId(221).subscribe(
      (item: Task[]) => {
        this.todolist = item;
    });
    this.todolist.forEach(item => {
      item.isOver = false;
      item.isEdit = false;
      item.editText = item.title;
    });
  }

  edit(index) {
    if (!this.todolist[index].isOver) {
      this.todolist[index].editText = this.todolist[index].text;
      this.todolist[index].isEdit = true;
    }
  }

  overMatter(index) {
    if (!this.todolist[index].isEdit) {
      this.todolist[index].isOver = !this.todolist[index].isOver;
    }
  }

  enterTaskEdit(index) {
    this.todolist[index].text = this.todolist[index].editText;
    this.todolist[index].isEdit = false;
  }

  cancelTaskEdit(index) {
    this.todolist[index].isEdit = false;
  }

  creatNewTask() {
    const newTask = new List;
    newTask.isEdit = false;
    newTask.isOver = false;
    newTask.text = this.newTaskText;
    this.todolist.unshift(newTask);
  }

  openModal(modal) {
    modal.open();
  }

  closeModal(modal) {
    modal.close();
  }

  onClose() {
    swal({
      type: 'success',
      title: 'Success!',
      text: 'close it!',
    });
  }

}
export class List {
  text: string;
  editText: string;
  isOver: boolean;
  isEdit: boolean;
}

<div class="todolist-wrap">
  <div class="form-group" style="margin-bottom:7px">
    <input type="text" class="new-task-input" [(ngModel)]="newTaskText" (keyup.enter)="creatNewTask()">
    <button class="btn btn-primary" (click)="creatNewTask()">
      <i class="fa fa-plus"></i>
    </button>
  </div>
  <div class="form-group task-list" *ngFor="let item of todolist;let i = index">
    <button class="over-btn" (click)="overMatter(i)" *ngIf="!item.isEdit">
      <i class="fa fa-square-o" *ngIf="!item.isOver"></i>
      <i class="fa fa-check-square-o" *ngIf="item.isOver"></i>
    </button>
    <label class="list-text" [ngClass]="{'list-over':item.isOver,'list-text':!item.isOver}" (dblclick)="edit(i)" *ngIf="!item.isEdit"
      title="{{item.title}}">{{item.title}}</label>
    <button class="btn btn-primary" (click)="openModal(myModal)">open my modal</button>
    <input type="text" class="edit-input" [(ngModel)]="item.editText" *ngIf="item.isEdit" (keyup.enter)="enterTaskEdit(i)">
    <button class="enter-task-edit" *ngIf="item.isEdit" (click)="enterTaskEdit(i)">
      <i class="fa fa-check"></i>
    </button>
    <button class="cancel-task-edit" *ngIf="item.isEdit" (click)="cancelTaskEdit(i)">
      <i class="fa fa-close"></i>
    </button>

    <modal #myModal>
      <modal-header>
        <h3>Modal header</h3>
      </modal-header>
      <modal-content>
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.
          Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.
          Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip
          quis cardigan american apparel, butcher voluptate nisi qui.</p>
      </modal-content>
      <modal-footer>
        <button class="btn btn-primary" (click)="closeModal(myModal)">close</button>
      </modal-footer>
    </modal>
  </div>
</div>

Here is a simple code of my toDoList Components , i tried to open the modal in Dashboard where i have included my toDoList Components and others components but when i click the button the application freeze and every thing stop working.

Can you please help me with this ?