Add a class to a specific dom outside of Component in Angular2

Question

I have a component that opens up a modal based on if the a variable called 'isVisible' is True or False. Once the modal is visible, I would like to add a class to the 'body' tag of the page and once it is closed, I'd like to remove the class from the 'body' tag.

Below is a snippet of my code and what I have tried.

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

@Component({
    selector: 'modal',
    template: '<div class="modal_div">
        <div (click)="closeCard()"></div>
        <div class="modal_body">blah</div>
    </div>'
})

export class DailogComponent{
    isVisible: boolean;
    constructor(public element: ElementRef){
        this.isVisible = false;
    }

    OpenModal(){
        this.isVisible = true;
        //add css class to body here which is where I am lost 
       console.log(this.element.nativeElement.parentNode.querySelector('body'));
    }

    closeModal(){
        this.isVisible = false;
        //remove css class to body here which is where I am lost 
       console.log(this.element.nativeElement.parentNode.querySelector('body'));
    }
}

Tell me if my answer is what you were waiting for. This is a bizarre question as you have already the knowledge necessary to find it yourself. Or maybe my answer is just plain wrong in which case I'll learn something myself. — Ced, Sep 12 '16 at 16:24

score 1 · Answer 1 · edited May 23 '17 at 11:46

1

Someone correct me if this is wrong or an anti pattern in ng.

You can just use javascript for that. If I understood correctly you want to change the class of the body tag. So the body of the page. <body></body>

How do I toggle an element's class in pure JavaScript?

and getElementsByTagName() or yeah query selector as you did, I personally use getElementsByTagName for no good reason other than I'm used to it.

  //don't capitalize function names.
  toggleBodyClass(){
    this.toggleClass(document.getElementsByTagName('body')[0], 'myclass');
  }
  //this function is taken from the Stackoverflow thread posted above.
  toggleClass(ele, class1) {
    let classes = ele.className;
    let regex = new RegExp('\\b' + class1 + '\\b');
    let hasOne = classes.match(regex);
    class1 = class1.replace(/\s+/g, '');
    if (hasOne)
      ele.className = classes.replace(regex, '');
    else
      ele.className = classes + class1;
  }

tested, works

edited May 23 '17 at 11:46

Community

1
1

answered Sep 12 '16 at 16:09

Ced

15,847
14
87
146

Cheers mate. I was over thinking this and was only trying to solve through angular2. This makes for a straight and easy answer – user875139 Sep 12 '16 at 16:31
@user875139 yeah, I'm glad this was what you were asking and I thought it was a very bizarre question as you had all the knowledge to do so already. Sometimes it's just that simple :p – Ced Sep 12 '16 at 16:32
yeah sometimes one just forgets the basics especially when picking up something new. (Angular2 in my case lol) – user875139 Sep 12 '16 at 16:48

Add a class to a specific dom outside of Component in Angular2

1 Answers1