How to remove class name of li in angular 8

Question

Tried to remove classname of all li but not working.I do not know how to do that in angular 8.If anyone know please help to find solution.

app.component.html:

<tr>
<div class="wrapper">
  <ul>
    <li class="name"><span>Test 1</span></li>
    <li class="name"><span>Test 2</span></li>
    <li class="name"><span>Test 3</span></li>
    <li class="name"><span>Test 4</span></li>
    <li class="name"><span>Test 5</span></li>
  </ul>
</div>
</tr>

app.component.ts:

 setInnertext(event){ 
    let getTr=event.target.closest('tr');
    this.renderer.removeClass(getTr.querySelector('.wrapper > ul > li'),'name'))
  }

Answer 1

I had similar situation when we needed trigger dynamically added class on click. For your case first target the closest tr and then iterate via querySelectorAll through its children li.

app.component.ts

    setInnertext($event: any) {
        $event.target.closest("ul").querySelectorAll("li").forEach(item => {
            this.renderer.removeClass(item, "name");
        });
    }

Hope it helps.