[Fixed] Angular2 add class to body tag


How can I add a class to the body tag without making the body as the app selector and using host binding?

I tried the using the Renderer but it changes the whole body

Angular 2.x bind class on body tag

I’m working on a big angular2 app and changing the root selector will impact a lot of code, I will have to change a lot of code

My use case is this:

When I open a modal component (created dynamically) I want the document scrollbar to hide


I would love to comment. But due to missing reputation I write an answer.
Well I know two possibilities to solve this issue.

  1. Inject the Global Document. Well it might not be the best practice as I don’t know if nativescript etc supports that. But it is at least better than use pure JS.
constructor(@Inject(DOCUMENT) private document: Document) {}


Well and perhaps even better. You could inject the renderer or renderer 2 (on NG4) and add the class with the renderer.

export class myModalComponent implements OnDestroy {

  constructor(private renderer: Renderer) {
    this.renderer.setElementClass(document.body, 'modal-open', true);

  ngOnDestroy() {
    this.renderer.setElementClass(document.body, 'modal-open', false);


import { Component, OnDestroy, Renderer2 } from '@angular/core';

export class myModalComponent implements OnDestroy {

  constructor(private renderer: Renderer2) {
    this.renderer.addClass(document.body, 'modal-open');

  ngOnDestroy() {
    this.renderer.removeClass(document.body, 'modal-open');

Leave a Reply

(*) Required, Your email will not be published