Add a class in all the elements of selector get by class in angular2

Question

I am getting a element ref by below code and I want add a class and remove a class from all the elements which i get.

app.component.html

<ul>
   <li class="option-btn cm-grey" />option 1</li>
   <li class="option-btn cm-grey" />option 1</li>
   <li class="option-btn cm-grey" />option 1</li>
</ul>

app.component.ts

var allbtn = document.querySelectorAll('.option-btn');
allbtn.removeClass('cm-grey');
allbtn.addClass('cm-blue');

Above code is not working.

score 1 · Accepted Answer · answered Jan 21 '18 at 07:18

1

Please use classlist

allbtn.classList.add("mystyle");

Note: The classList property is not supported in Internet Explorer 9. The following code will work in all browsers:

function myFunction() {
    var element, name, arr;
    element = document.getElementById("myDIV");
    name = "mystyle";
    arr = element.className.split(" ");
    if (arr.indexOf(name) == -1) {
        element.className += " " + name;
    }
}

Similarly

allbtn.classList.remove("mystyle");

Cross-browser solution

function myFunction() {
    var element = document.getElementById("myDIV");
    element.className = element.className.replace(/\bmystyle\b/g, "");
}

You can further pass class names to these functions as a parameter if you want to go for cross-browser support (which I encourage) and make these functions reusable.

answered Jan 21 '18 at 07:18

Gurmeet Singh

774
8
21

Property 'classList' does not exist on type 'NodeListOf'. - this error is coming when I use classlist – AMit SiNgh Jan 21 '18 at 07:21
This is not good practice to use direct document in angular like : document.getElementById("myDIV") – AMit SiNgh Jan 21 '18 at 07:22
document.querySelectorAll('.option-btn'); returns an array you need to iterate on that array to be able to use classList. @AMitSiNgh – Gurmeet Singh Jan 21 '18 at 07:24
please mention how to iterate and use the class list. @gurmeet – AMit SiNgh Jan 21 '18 at 07:25
I have provided pure js functions for cross-browser you can convert them by reading through the code and creating a function according to your own needs @AMitSiNgh – Gurmeet Singh Jan 21 '18 at 07:25
1

[].forEach.call(allbtn,function(key,value){ key.classList.remove("cm-grey"); }); – Gurmeet Singh Jan 21 '18 at 07:27

Add a class in all the elements of selector get by class in angular2

1 Answers1