Спрятать класс в угловой

Question

Я пытаюсь расположить селектор :: before :: after css в моде всплывающего окна при каждом перемещении блока. Это работает, но класс стрелки добавляется, когда я нажимаю на блок и открывается модальное окно.

Я попытался удалить класс

elRef.nativeElement.queryselector(".arrow").remove()

Кроме того, добавив отображение, ни один класс

elRef.nativeElement.queryselector(".arrow").classList.add("hide")

 .hide{
       display: none
 }

Я хочу, чтобы стрелка была привязана к блоку, и всплывающее окно открывалось, а не когда блокщелкнул и открылось всплывающее окно

Воспроизводимый стек стека

https://stackblitz.com/edit/angular-ytnzmy

Answer 1

Сначала вам нужно переместить свой класс скрытия на style.css, во-вторых, вам нужно будет удалить класс скрытия при модальном закрытии, например

 this.element.nativeElement.querySelector('.arrow').classList.remove('hide');

демо

Answer 2

Во-первых, ваш синтаксис нуждается в коррекции. Это должно быть как показано ниже

this.element.nativeElement.querySelector(".arrow").classList.add("hide");

Во-вторых, поскольку в Angular по умолчанию включена инкапсуляция вида , ваши стили должны находиться внутри hello.component.ts

ОбновитьStackblitz