i want to implement dynamic styling on just one item using ids and on item2 not item1.
<ng-multiselect-dropdown
id="two"
name="city"
[settings]="dropdownSettings"
[data]="cities"
[(ngModel)]="selectedItem"
(onSelect)="selectedItemslist(selectedItem)"
[ngClass]="condition1bool ? 'multicustom' : ''|| condition2bool ? 'multicustomdenter' : ''||condition3bool ? 'defaultcustom' : ''"
>
</ng-multiselect-dropdown>
import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { EmployeeModel } from 'src/app/Models/EmployeeModel';
import { HttpService } from 'src/app/Services/http.service';
import { SharedServiceService } from 'src/app/Services/shared-service.service';
interface ICountry {
item_id: number;
item_text: string;
status:number;
color:string;
}
interface CountryDictionary {
[key: number]: ICountry;
}
@Component({
selector: 'app-signup',
templateUrl: './signup.component.html',
styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit{
cities: Array<ICountry> = [];
selectedItem: Array<ICountry> = [];
dropdownSettings: any = {};
condition1bool: boolean=false;
condition2bool: boolean=false;
condition3bool: boolean=false;
denterbool: boolean=false;
data: ICountry;
arraylength: number;
arraylength2: number;
filterarraydata: Array<ICountry> = []
constructor()
{
}
ngOnInit(){
this.cities = [
{
item_id: 1,
item_text: 'Lahore',
status:1,
color:'red'
},
{
item_id: 2,
item_text: 'Islamabad',
status:2,
color:'yellow'
},
{
item_id: 3,
item_text: 'Karachi',
status:3,
color:'orange'
},
{
item_id: 4,
item_text: 'Multan',
status:4,
color:'brown'
}
];
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
toggleSelectAll: false,
enableCheckAll:false,
allowRemoteDataSearch: false,
textField: 'item_text',
itemsShowLimit: 2,
};
}
getItemColors( arraydata: Array<ICountry> = []) {
for (let user of this.cities) {
if(user.item_id==1)
{
if(this.condition1bool==false)
{
this.condition1bool=true;
this.condition2bool=false;
this.condition3bool=false;
break;
}
}
else if(user.item_id==2)
{
if(this.condition2bool==false)
{
this.condition1bool=false;
this.condition2bool=true;
this.condition3bool=false;
break;
}
}
}
}
selectedItemslist(arraydata: Array<ICountry> = [])
{
console.log('araay main length' +arraydata.length);
if(arraydata.length==1)
{
this.arraylength=arraydata.length;
this.getItemColors(this.filterarraydata);
}
if(arraydata.length>1)
{
this.filterarraydata=arraydata;
this.filterarraydata.splice(0, arraydata.length-this.arraylength);
this.arraylength=arraydata.length;
console.log('araay lengtha after splice ' + this.filterarraydata);
this.getItemColors(this.filterarraydata);
}
}
}
.multicustom
{
.multiselect-item-checkbox input[type='checkbox']:checked + div {
color: green !important;
}
}
.multicustomdenter
{
.multiselect-item-checkbox input[type='checkbox']:checked + div {
color: yellow !important;
}
}
.defaultcustom
{
.multiselect-item-checkbox input[type='checkbox']:checked + div {
color: orange !important;
}
}
when i add these classes when id=1 or id=2 at first item selection it works fine but at second selection it implements styles on all previous checked items also. but i want to add dynamically styles on each item index using id as status. And ng-multiselect is not picking ng-template.