Depending on the variable value, I want to change the style of the p-autocomplete component.
A toggle input determines whether the variable is true or false.
<div class="switch-inner">
<p [ngClass]="{'businessG': !toggle }" class ="toggle-inline ">Business group</p>
<div class="toggle-btn toggle-inline">
<label class="switch">
<input type="checkbox" [(ngModel)]="toggle">
<span class="slider round"></span>
</label>
</div>
<p [ngClass]="{'borrower': toggle }" class="toggle-inline">Borrower</p>
</div>
I then use this value to set the background color of my suggestion items on hover.
Currently, I am using a default color which I have customized using ::ngdeep.
::ng-deep .ui-autocomplete-list-item:hover{
background-color: #24B3C7; // would change this to another color
font-family: 'BNPPSans';
border-radius: 0
}
The background color will be changed based on the value of the toggle variable.
Below is my component's HTML:
<div class="container" id ="inputSearchPage">
<div class="search-input col-md-6 col-sm-6 ui-fluid" >
<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"
emptyMessage={{noBorrowerResult}}
[minLength]="3"
[size] = "40"
field = "name"
>
<ng-template let-elm pTemplate="item" class="suggestion-item" >
<div >{{elm.name}} ( ID: {{elm.code}} )</div>
<div class="add-button">+</div>
</ng-template>
</p-autoComplete>
</div>
How can I dynamically set the background color based on the toggle value? (If true, set
::ng-deep .ui-autocomplete-list-item:hover