How can I remove
from the body?

Question

I want to remove an opened modal on a page but I could not access to this div element that lock the document,

I could not access to this div, to define an ID or Name to remove it by Renderer2,

<div class="modal-backdrop fade show"></div>

something like this,

this.renderer.removeChild(document.body, HTMLDivElement);

Generally speaking, you want to avoid direct DOM manipulation in Angular at all costs. How is this modal opened in the first place? Can the parent component use `*ngIf`? — Will Alexander, Aug 25 '19 at 19:54

score 1 · Answer 1 · answered Aug 26 '19 at 02:24

I believe the best way to remove it would be the use of *ngIf. It adds and removes DOM elements with condition.

For example

HTML

<div *ngIf="foo" class="modal-backdrop fade show">
  I will be added to the DOM only if foo is true
</div>

Typescript

someMethod(value){
  this.foo=value // or this.foo=!this.foo
}

where someMethod() is where your this.renderer.removeChild(... lies.

1 Answers1