web-dev-qa-db-fra.com

Angular 5 supprimer des éléments DOM spécifiques

J'ai un petit problème que je ne peux pas comprendre comment faire. Je suis en train d'apprendre Angular/TypeScript et je ne vois pas comment supprimer certains éléments du DOM .J'ai du contenu généré automatiquement, qui possède des classes CSS spécifiques. Malheureusement, les objets sont générés ailleurs et je ne peux en aucune manière les configurer. Je ne peux donc ajouter aucun ngIf ou quoi que ce soit d'autre sur ce contenu, cela simplifierait mon travail. Ce que je veux réaliser ressemble à ceci (version jQuery): 

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

J'ai une bascule et je souhaite y associer un événement qui, lorsqu'il est activé, masque/affiche tous les éléments de ce type avec la vue. J'essaie d'y parvenir en mode angulaire sans jQuery mais avec peu de succès. Des idées sur comment je pourrais être capable d'atteindre ceci?

javascriptjqueryangulartypescriptangular5
2
Vlad N

Dans Angular, vous pouvez utiliser un accès direct à DOCUMENT.

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

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

Ayant cela, vous pouvez accéder à votre élément et y définir une logique.

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

Vous pouvez travailler avec *ngIf="boleanVar", l'initialiser dans votre ts 'boleanVar = true' dans votre ts et ajouter <br>< button (click)="boleanVar = !boleanVar"> Toggle visibility</button>

1
Romain capelleman

Vous pouvez utiliser la directive ngif pour cela.

@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;
}

En fonction de la valeur de la variable show, l'élément div basculera l'affichage.

0
Liju Kuriakose