Угловой 5 удалить определенные элементы DOM

Question

У меня есть небольшая проблема, которую я не могу понять, как это сделать. Я только изучаю Angular / Typescript и не могу понять, как можно удалить некоторые элементы DOM. У меня есть автоматически сгенерированный контент, который имеет определенные классы CSS. К сожалению, объекты генерируются где-то еще, и я не могу настроить их каким-либо образом, поэтому я не могу добавить ни ngIf, ни что-либо еще в этот контент, это упростило бы мою работу ... Я просто должен их использовать. Я хочу добиться чего-то вроде этого (версия jQuery):

$("#button").click(function() {
    $('.fc-oss').toggle();
 });

У меня есть переключатель, и я хочу прикрепить к нему событие, которое, когда оно активируется, скрывает / показывает все элементы с этим конкретным типом из представления. Я пытаюсь добиться этого в угловых без JQuery, но с небольшим успехом. Любые идеи о том, как я мог бы достичь этого?

Answer 1

В Angular вы можете использовать прямой доступ к ДОКУМЕНТУ.

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Injectable()
export class MyService {
  constructor(@Inject(DOCUMENT) private document: any) {}
}

Имея это, вы можете получить доступ к своему элементу и определить для него некоторую логику

let element = this.document.getElementbyClassName('fc-oss');
element.style.display = element.style.display === 'none' ? 'block' : 'none';

Answer 2

Для этого вы можете использовать директиву ngif.

@Component({
  selector: 'ng-if-simple',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show">Text to show</div>
`
})
class NgIfSimple {
  show: boolean = true;
}

В соответствии со значением переменной show элемент div будет переключать представление.

Answer 3

Вы можете работать с *ngIf="boleanVar", инициализировать его в своем ts 'boleanVar = true' в своем ts и добавить <br>< button (click)="boleanVar = !boleanVar"> Toggle visibility</button>