7

I'd like to put a conditional styling on a primeng 'p-overlayPanel' element. I have tried:

  1. <p-overlayPanel [styleClass]="#{(bean.comment) ? 'style1' : 'style2'}">, but it's not working.
  2. [ng-class]="bean.comment ? 'style1' : 'style2'" - this is not working either.

Styleclass works only without a condition like so:

  • <p-overlayPanel [styleClass]="style1"> // html file

  • p-overlayPanel .style1.ui-overlay { background-color: yellow; } // css file

While [ng-class] doesn't work at all (but works fine on vanilla JS elements). Have I missed something? My questions are following:

  1. Is 'ng-class' not working for some of the elements from ngPrime collection?
  2. How to correctly conditionally apply 'styleClass' for p-overlayPanel element? I'm using Angular 8.
Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
stanjaslaw
  • 81
  • 1
  • 4
  • 1
    There are several options listed in this answer, one of them should work: https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass. In your case type 4 will apply to you: [ngClass]="(step=='step1')?'my-class1':'my-class2'" – ulmas Jan 24 '20 at 19:07
  • Does this answer your question? [Angular: conditional class with \*ngClass](https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass) – ulmas Jan 24 '20 at 19:11
  • @ulmas this related to primeng and how you can change the style of these element the have something like add a styleclass then you can change the them same as my answer – Muhammed Albarmavi Jan 27 '20 at 13:42

2 Answers2

4

styleClass accept string as a css class or list of classes and apply to the elemnt at that already have a list of these classes overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow

so if you want to change the background color you have to do it like this 

.style1.ui-overlaypanel{
  background-color: red;
}

.style2.ui-overlaypanel{
  background-color: green;
}

you have to add the class to the global style file not the component style file and if you use style property the value will pass to ngStyle directive.

demo

overlaypanel.ts

Updated

you can use ngClass but the style must be change like the example below , because now the css classes will apply to the element directly.

.style1 .ui-overlaypanel{
  background-color: red;
}

.style2 .ui-overlaypanel{
  background-color: green;
}

demo

Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
  • 1
    Thanks, the updated answer works. For those who is new to PrimeNG :- it has to be adapted accordingly for each component. E.g. for sidebar, use .ui-sidebar. – Prabhakaran M Mar 08 '23 at 10:18
2

You can use [ngClass] like this:

<input
  pInputText
  [ngModel]="vendor.iban"
  name="pIban"
  #pIban="ngModel"
  (click)="some(pIban)"
  class="col-md-7 ui-inputtext ui-widget ui-state-default ui-corner-all"
  [ngClass]="{
    'errorVendor': vendor.iban == '' && pIban.touched
  }"
/>
Youzef
  • 616
  • 1
  • 6
  • 23
Dacili
  • 258
  • 4
  • 8