Is it possible to dynamically add and remove classes using getElementById in Angular 8? I need to switch from 'col-md-12' to 'col-md-6' when a user clicks on the details icon.
I also want to modify the style of another div by setting display: block.
component.html
<div class="col-md-12" id="demo">
<div class="example-container mat-elevation-z8 mt-5">
<table class="table table-striped">
<tbody>
<tr>
<th>Points</th>
<th>###</th>
</tr>
<tr *ngFor="let user of usersArray" >
<td>
{{user.score}}
</td>
<td>
<i class="material-icons text-primary pointer" (click)="details()">account_circle</i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
After changing the class, I want this div to be displayed
<div class="col-md-6" style="display: none;" >
<div class="userDetails">
<img src="../../assets/images/user.png">
<span class="mx-3"> <b>Shubham Patil</b></span>
<div class="example-container mat-elevation-z8 mt-4">
<table class="table table-striped rounded">
<tbody>
<tr>
<th>Topics</th>
<th>Points</th>
</tr>
<tr >
<td>
Why me
</td>
<td>
300
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
component.ts
element: HTMLElement;
details(){
this.element = document.getElementById('demo').classList.remove("col-md-12") as HTMLElement;
this.element = document.getElementById('demo').classList.add("col-md-6") as HTMLElement;
console.log("change")
}