0

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

Daniel Methner
  • 509
  • 1
  • 6
  • 18

4 Answers4

1

Try to add :host ::ng-deep

Style are scoped, and there are not inherited by nesting.

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

styleClass is the property that put the class on the first level of a PrimeNG Component.

inputStyleClass is the property that will put the class on the input itself for this specific component.

I often have to play with the style encapsulation with styleClass, so I believe it is the same for inputStyleClass

Word about ::ng-deep deprecation

Yes, for sure it is deprecated. To be totally fair, there is an alternative. But the alternative counterpart is huge and in my opinion, the big picture is worst.

You can make it work by changing your ViewEncapsulation in your component with :

encapsulation: ViewEncapsulation.None

as follow

@Component({
  selector: '',
  template: '',
  styles: [''],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

Reference 1 about alternatives and reasons of deprecation

Reference 2 about alternatives of ::ng-deep

The choice is yours, but for my part I continue to use this methodology with third party library like primeNG, because there is no real alternative.

You either choose to make your style global or your style scoped.

Kill the encapsulation for the sake of a third party library usage, seems to me an overkill process.

By making your ViewEncapsulation to none, you give up on style encapsulation, so beware of it.

Axiome
  • 695
  • 5
  • 18
  • Thank you for the answer. Unfortunately ::ng-deep is deprecated according to the documentation at Angular.io – Daniel Methner Oct 13 '21 at 11:24
  • @DanielMethner It is deprecated without any proper solution other than disabling the ViewEncapsulation of Angular. https://stackoverflow.com/questions/47024236/what-to-use-in-place-of-ng-deep – Axiome Oct 13 '21 at 13:23
  • @DanielMethner I added an alternative for you to be able to do it without `::ng-deep`, but I really don't recommend you to go for this way. I feel like the ViewEncapsulation.NONE is a bazooka to kill a fly. But at least it is not deprecated. `::ng-deep` has no alternative even deprecated and is the cleanest way of handling your problem if you want my point – Axiome Oct 13 '21 at 13:37
1

HTML:

<p-inputNumber styleClass="input-styling"></p-inputNumber>

CSS:

::ng-deep .input-styling input {
  width: 20px !important;
}
work79
  • 11
  • 1
0

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.

Daniel Methner
  • 509
  • 1
  • 6
  • 18
0

Simply add styleClass="w-full" to p-inputNumber tag to adjust 100% width or according style to reach desired width in reference to https://www.primefaces.org/primeflex/width

No encapsulation: ViewEncapsulation.None is needed and no extra css classes/styling is required.

Michał Sawicki
  • 49
  • 1
  • 10