cssangularprimengstyling

PrimeNg p-inputnumber cannot be styled


I am getting stuck trying to implement the PrimeNg Inputnumber element: https://www.primefaces.org/primeng/showcase/#/inputnumber

As per its documentation, there are a couple of attributes that can be used to style the input element, most notably styleClass and inputStyleClass. Unfortunately, neither of them work but rather they get completely ignored.

component.html:

<p-inputNumber 
  inputStyleClass="form-control-inputnumber" [(ngModel)]="subwinFld.orderAdd.doubleVal">
</p-inputNumber>

Global styles.css

.form-control-inputnumber {
  background:red;
  width: 100%;
}

I have used and successfully styled other primeNg elements before, using the exact same strategy, for example the p-calendar element. However, here it completely ignores the attribute.

What am I doing wrong?

Screenshot


Solution

  • The cause for the missing styling was a runtime error in the typescript of the component, that prevented the correct compilation of the DOM. I assumed that did not matter, since they should not be related at all, but they are (somehow). Since others may have the same erroneous assumption, I am leaving this question here, rather than deleting it.