I Am Trying All The Selected Arrays To Change The Style Angular 4

I can select more than one ID with the checkbox and they are all selected but only one of them is active in the css. I want for each ID that I select to change the style . This is

Solution 1:

@ZhuniquA. Sorry, I read too quickly your question. When we want to select one and only one element we have an unique variable, if we want to select one or more elements, generally add a new property to the element.

<!--I used a variable (really a property of valueItem) that I called checked -->
<div class="tab-item" fxLayout="row" [ngClass]="{'active': valueItem.checked, 'tab-item': true}">
     <div class="icon">
        <!--see that we can use as ngModel valueItem.checked-->
        <app-checkbox [(ngModel)]="valueItem.checked"></app-checkbox>
     </div>
     <div class="unAssignedVIs" [ngClass]="{'active': valueItem.checked, 'unAssignedVIs': true}">
        {{valueItem.name}}
     </div>
     <div class="ipUnAssignedVIs" [ngClass]="{'active': valueItem.checked, 'ipUnAssignedVIs': true}">
        {{Level[valueItem.level]}}
     </div>
</div>

The "magic" in this case is that we are using an object "valueItem", so we can add the property "checked" simply using valueItem.checked (If the property not exist is undefined)

Well, VisualStudio mark as "error" because we don't have the property "checked". Well. We can ignore this advertisment or, in code give the property

//If is an only element
   valueItem.checked=false;

//If we have an array of items we can write
//Imagine we have a variable items=[{name:"1",level:0},{name:"2",level:2},...]

this.items=this.items.map(item=>{
    return {...item,checked:false}
  })