Apply selected styles to only one div at a time (without jQuery)

Question

Could you please help me. I need to make <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> visible (initially it has style "visibility: hidden") when I click on div with the class="role-box". It should work in a following way: when I click on a div with a title "Role-one" the badge for this div will be visible, and if I click on a div with a title "Role-two", the badge for the "Role-one" div will become hidden and the badge for "Role-two" div will be visible. Currently it shows badges for all divs if I click on them. Below is the code.

HTML:

<div class="col-6 col-md-4" *ngFor="let role of joblabels, index as ri">
    <div class="role-box" id="{{ri}}" (click)="selectRole(ri)">
        <span class="badge badge-light"><i class="fa fa-check-circle"></i></span>
        <p class="role-type">{{ role.title }}</p>
    </div>
</div>

TS:

joblabels = [
{title: 'Role-one'}, 
{title: 'Role-two'}, 
{title: 'Role-three'}];


selectRole(id) {
let badge = document.getElementById(id).childNodes;
if (badge[1]['style'].visibility === 'visible') {
  badge[1]['style'].visibility = 'hidden';
}
else {
  badge[1]['style'].visibility = 'visible';
} }

Answer 1

You can use [ngStyle] of angular.

Have a variable that holds the status of selected

component TS:

selectedRole: any;

joblabels = [
{title: 'Role-one'}, 
{title: 'Role-two'}, 
{title: 'Role-three'}];


selectRole(title) {
  this.selectedRole = title;
}

HTML:

<div class="col-6 col-md-4" *ngFor="let role of joblabels, index as ri">
    <div class="role-box" id="{{ri}}" (click)="selectRole(role.title)">
        <span class="badge badge-light" [ngStyle]="{'visibility':role.title === selectedRole ? '' : 'hidden' }"><i class="fa fa-check-circle"></i></span>
        <p class="role-type">{{ role.title }}</p>
    </div>
</div>