Change conditionally CSS of angular component

Question

I would change the style of p-autocomplete component depending on variable value

I have a toggle input that determine whether my 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>

Then I use this value to set the style of my suggestion items background on hover.

actually I'm using a default color that I have changed by using ::ngdeep

::ng-deep .ui-autocomplete-list-item:hover{
    background-color: #24B3C7; // would change this to another color
    font-family: 'BNPPSans';
    border-radius: 0
}

I would change the background color depending on the value of the toggle variable.

Here's my component 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 set the background color depending to the toggle value ? ( if true set ::ng-deep .ui-autocomplete-list-item:hover backgroud-color to color 1 else set to color 2 )

Do you have a problem? What is the question?

Martin Parenteau
– Martin Parenteau

2018-03-20 14:59:34 +00:00
Commented Mar 20, 2018 at 14:59 — Martin Parenteau
– Martin Parenteau, Commented Mar 20, 2018 at 14:59
I have updated my question

infodev
– infodev

2018-03-20 15:02:25 +00:00
Commented Mar 20, 2018 at 15:02 — infodev
– infodev, Commented Mar 20, 2018 at 15:02

Dakota Raymond · Accepted Answer · 2018-03-20 15:24:16Z

1

You can use ngStyle, but there is currently no support for hover, so you'll have to workaround it using mouseenter and mouseleave.

So in your html you can add

[ngStyle]="(hover && toggle) ? { 'background-color': 'someColor' } : { 'background-color': 
'anotherColor' }" (mouseover)="hover=true" (mouseleave)="hover=false"

edited Mar 20, 2018 at 15:24

answered Mar 20, 2018 at 15:09

Dakota Raymond

1355 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

infodev Over a year ago

Not working, because I should also check the value of toggle

Samir · Accepted Answer · 2018-03-21 02:57:26Z

1

The best way is to use hostListeners - 'mouseenter' and 'mouseleave'

answered Mar 21, 2018 at 2:57

Samir

461 silver badge5 bronze badges

Collectives™ on Stack Overflow

Change conditionally CSS of angular component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related