Угловой модал открывается при старте

Question

Я создал модальный компонент, используя Angular 7 ( Пример ):

import { Component, ElementRef, Input, OnInit, OnDestroy, Renderer2, Inject } from '@angular/core';


import { ModalService } from './modal.service';

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

export class ModalComponent implements OnInit, OnDestroy {

  @Input() id: string;
  private element: any;

  constructor(private modalService: ModalService, private el: ElementRef, private renderer: Renderer2) {
    this.element = el.nativeElement;
  }

  ngOnInit(): void {

    let modal = this;

    if (!this.id) 
      return;

    document.body.appendChild(this.element);

    this.modalService.add(this);

  }

  ngOnDestroy(): void {
    this.modalService.remove(this.id);
    this.element.remove();
  }

  public open(): void {
    this.element.style.display = 'block';
    this.renderer.addClass(document.body, 'modal');
  }

  public close(): void {
    this.element.style.display = 'none';
    this.renderer.addClass(document.body, 'modal');
  }

}

Со следующим шаблоном HTML:

<div class="modal">
  <ng-content></ng-content>
</div>

<div class="overlay"></div>

А затем модальный сервис:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class ModalService {

  private modals: any[] = [];

  add(modal: any) {
    this.modals.push(modal);
  }

  remove(id: string) {
    this.modals = this.modals.filter(x => x.id !== id);
  }

  open(id: string) {
    let modal: any = this.modals.filter(x => x.id === id)[0];
    modal.open();
  }

  close(id: string) {
    let modal: any = this.modals.filter(x => x.id === id)[0];
    modal.close();
  }

}

Я использую его следующим образом:

<button (click)="modalService.open('modal-1')">Open Modal 1</button>

<modal id="modal-1">
  <p>Modal 1</p>
  <button (click)="modalService.close('modal-1');">Close Modal 1</button>
</modal>

При запуске модал открывается по умолчанию, а не закрывается.

Кто-нибудь знает, что мне не хватает?

Answer 1

Обновленный ответ

Вы видите модальный режим непосредственно при загрузке, потому что вы помещаете компонент modal в DOM, а его свойство display css сначала не устанавливается на none.

Вы можете установить display: none непосредственно на ваш мод, когда вставляете его в DOM в вашем ModalService (лучше держите все манипуляции со свойством display css в одном месте).

Обновлен пример StackBlitz: https://stackblitz.com/edit/mk-angular-modal-tqpjbf

ngOnInit(): void {

  let modal = this;

  if (!this.id) 
    return;

  this.element.style.display = 'none'; // set display: none when inserting modal in the DOM
  document.body.appendChild(this.element);

  this.modalService.add(this);

}