Componente modal puro

import { Injectable } from "@angular/core";
@Injectable({
  providedIn: "root",
})
export class ModalService {
  private modals: any[] = [];
  private modalActiva: any;
  constructor() {}
  add(modal: any) {
    // add modal to array of active modals
    this.modals.push(modal);
  }
  remove(id: string) {
    // remove modal from array of active modals
    this.modals = this.modals.filter((x) => x.id !== id);
  }
  open(id: string) {
    // open modal specified by id
    const modal: any = this.modals.filter((x) => x.id === id)[0];
    this.modalActiva = modal;
    modal.open();
  }
  closeById(id: string) {
    // close modal specified by id
    const modal: any = this.modals.filter((x) => x.id === id)[0];
    delete this.modalActiva;
    modal.close();
  }
  close() {
    this.closeById(this.modalActiva.id);
  }
}

import { Component, ElementRef, Input, OnInit, OnDestroy } from "@angular/core";
import { ModalService } from "./services/modal.service";

@Component({
  selector: "ve-modal",
  template: `<div class="ve-modal">
      <div class="ve-modal-body">
        <button type="button" class="close" (click)="modalService.close()">
          <span aria-hidden="true">&times;</span>
        </button>
        <ng-content></ng-content>
      </div>
    </div>
    <div class="ve-modal-background"></div>`,
  styles: ["../inicio-tramite.component.scss"],
})
export class ModalComponent implements OnInit, OnDestroy {
  @Input() id: string;
  private element: any;
  constructor(public modalService: ModalService, private el: ElementRef) {
    this.element = el.nativeElement;
  }
  ngOnInit(): void {
    const modal = this; // Nos aseguramos de que tenga un ID
    if (!this.id) {
      console.error("modal must have an id");
      return;
    } // Se mueve el elemento al final de la pagina (justo antes del cierre del body), para que pueda ser mostrado encima de todo
    document.body.appendChild(this.element); // Cierre de modal haciendo clock en cualquier parte del background
    this.element.addEventListener("click", (e: any) => {
      if (e.target.className === "ve-modal") {
        modal.close();
      }
    });
    this.modalService.add(this);
  }
  ngOnDestroy(): void {
    this.modalService.remove(this.id);
    this.element.remove();
  }
  open(): void {
    this.element.style.display = "block";
    document.body.classList.add("ve-modal-open");
  }
  close(): void {
    this.element.style.display = "none";
    document.body.classList.remove("ve-modal-open");
  }
}