Angular 5 remove specific DOM elements

Question

I have a small issue that I can't figure out how to do. I am just learning Angular / Typescript and I can't figure out how I could remove some DOM elements. I have some auto generated content, that has specific CSS classes. Unfortunately The objects are generated somewhere else and I cannot configure them in any way so I cannot add any ngIf or anything else on that content, that would simplify my work... I just have to use them. What I want to achieve is something like this( jQuery version):

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

I have a toggle and I want to attach an event to it that when it's being activated, it hides/ shows all elements with that specific type from the view. I am trying to achieve this in angular without jQuery but with little success. Any ideas on how I might be able to achieve this ?

score 4 · Answer 1 · edited Jun 25 '18 at 08:50

4

You can work with *ngIf="boleanVar", init it in your ts 'boleanVar = true' in your ts and add <br>< button (click)="boleanVar = !boleanVar"> Toggle visibility</button>

edited Jun 25 '18 at 08:50

Albert Einstein

7,472
8
36
71

answered Jun 25 '18 at 08:46

Romain capelleman

56
4

The issue is that I cannot add the *ngIf to the elements. They are being generated somewhere else. I have absolutely no control over them or their attributes. I only have a class that identifies which type of element it is. – Vlad N Jun 25 '18 at 08:48
constructor(private renderer: Renderer, private elem: ElementRef){} and get your element like : let elements = this.elem.nativeElement.querySelectorAll('.fc-oss'); I hope it could help you – Romain capelleman Jun 25 '18 at 09:03

score 4 · Accepted Answer · answered Jun 25 '18 at 08:46

4

In Angular you can use direct access to DOCUMENT.

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

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

Having this you can access your element and define some logic to it

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

answered Jun 25 '18 at 08:46

VadimB

5,533
2
34
48

In this case I don't understand how I am supposed to use MyService, or where I should write the code in the second part. If I am exporting the MyService Class, that means I should be importing it in my component, then somehow I should be using it ( can't quite tell how from your example ) – Vlad N Jun 25 '18 at 08:54
No, MyService is an example. You can inject DOCUMENT object similar to your component. So your code can be: `export class MyComponent { constructor(@Inject(DOCUMENT) private document: any) {}` – VadimB Jun 25 '18 at 09:00
it seems like, import { DOCUMENT } from '@angular/platform-browser'; has been deprecated from Angular 8 – Rahimjon Rustamov Oct 31 '19 at 09:51

score 2 · Answer 3 · answered Jun 25 '18 at 08:47

2

You can use the ngif directive for that.

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

According to the value of the variable show the div element will toggle view.

answered Jun 25 '18 at 08:47

Liju Kuriakose

445
3
11

I know I could do this but I cannot add the *ngIf to my elements. They are being generated somewhere else and I have no access over them or their attributes. – Vlad N Jun 25 '18 at 08:49

Angular 5 remove specific DOM elements

3 Answers3

Linked