Скрыть листовку angular карта при начальной загрузке

Question

у меня есть карта, для которой используется следующее css. Когда страница загружается, я хочу, чтобы карта была скрыта и загружалась только после нажатия кнопки

Из консоли я использовал следующее и это работало, и это сделало карту скрытой

    document.getElementsByClassName('DemoMap')[0]).style.height="0px";

Но из машинописного кода

    (<HTMLElement>document.getElementsByClassName('DemoMap')[0]).style.height="0px";

я получаю ошибку времени выполнения

TypeError: Cannot read property 'style' of undefined

.DemoMap {
  z-index: 1;
  position: absolute;
  width: calc(100% - 600px);
  height: calc(100% - 400px);
  top: 60px;
}

Answer 1

Создание флага isMapVisible = false;

В вашей разметке используйте [style.display] для настройки состояния флага:

<div
  style="height: 90vh;"
  [style.display]="isMapVisible ? 'block' : 'none'"
  leaflet
  [leafletOptions]="options"
></div>

<button (click)="showMap()">Show map</button>

Используйте кнопку, чтобы изменить состояние логического значения на true, используя событие слушатель:

showMap() {
    this.isMapVisible = true;
}

Демо