Angular 5 remove specific DOM elements

angular 2 remove element from dom
angular remove component from dom
angular 6 dom manipulation
angular add dom element
angular 4 get element position
angular directive remove element
angular 4 remove class from element
remove parent element javascript

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 ?

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';

How delete element.nativeElement from DOM?, Your code will also worked, only you have to do that is remove element on OnInit​(), If you try to remove elements on constructor then that time  Angular injected DOM element into link function and you could query any node within component’s template, add or remove child nodes, modify styles etc. However, this approach had one major shortcoming — it was tightly bound to a browser platform.

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>

Remove elements/components from DOM instead of CSS-hiding , While CSS-hiding is OK for simple HTML elements, it seems suboptimal In those cases, I would prefer completely removing elements and components from the DOM instead of import { Component } from '@angular/core'; import { Observable } from 'rxjs'; 5. @netmikey. Copy link. Quote reply. Author  Back in Angular JS 1.x, we were taught that directives were meant to be the only way one should "Touch the DOM the Angular Way". That was because all versions of Angular have specific lifecycle hooks, and trying to mess with elements using plain javascript or JQuery alongside Angular used to result in unstable code.

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.

Remove DOM elements, If you inspect the resulting HTML in the Elements tab after removing the holds a reference to child views inside the node specific to the child  Steps to Remove an Element : Get angular element. Use .remove() method to remove the element from the document.

Working with DOM in Angular: unexpected consequences and , The article explores common elements used for DOM manipulation in within component's template, add or remove child nodes, modify styles etc. that breaks the abstraction, but rather the usage of a specific DOM API like  Custom elements bootstrap themselves - they start automatically when they are added to the DOM, and are automatically destroyed when removed from the DOM. Once a custom element is added to the DOM for any page, it looks and behaves like any other HTML element, and does not require any special knowledge of Angular terms or usage conventions.

Exploring Angular DOM manipulation techniques using , Given an HTML element and the task is to remove the HTML element from the document using JavaScript. Approach: Select the HTML element which need to  Accessing Child Elements in Angular / Ionic Angular , Front End Development , Ionic , JavaScript Components are at the heart of Angular, and we have some very useful tools to work with them efficiently.

How to remove an HTML element using JavaScript ?, Remove all the child elements of a DOM node in JavaScript. Child nodes can be How to get specific number of child elements using CSS? How to select all  Empty Or Remove Element Using AngularJS 2. To implement this program you need to download Apache POI library and have it in your build path (copy POI jars to lib folder).

Comments
  • 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 )
  • 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) {}
  • it seems like, import { DOCUMENT } from '@angular/platform-browser'; has been deprecated from Angular 8
  • 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.
  • 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
  • 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.