Angular 5 обновление визуализированного контента в модальном режиме

Question

Я создал пользовательский модальный компонент, где я хочу передать содержимое через <ng-content></ng-content>, Проблема здесь заключается в том, что, имея четыре из этих модалов в одном родительском компоненте, содержимое не обновляется. Вне зависимости от модальности, которую я нажму, чтобы открыть, содержимое всегда будет одинаковым с первого компонента.

Модальный.ts код:

@Component({


selector: 'modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  constructor() { }

ngOnInit() {
  var modal = document.getElementById('myModal');
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
}

openModal(){
 var modal = document.getElementById('myModal');
   modal.style.display = "block";
}

closeModal(){
  var modal = document.getElementById('myModal');
   modal.style.display = "none";
}

}

код родительского компонента:

<modal>First Modal</modal> 
<modal>Second Modal</modal> 
<modal>Third Modal</modal>
<modal>Fourth Modal</modal> 

В заключение, независимо от того, на каком модале я нажму, содержимое всплывающего окна всегда будет "Первый модальный".

Я думаю, мне не хватает какой-то инициализации.

Любая помощь приветствуется!