I am getting stuck trying to implement the PrimeNg Inputnumber element:

CodePudding user response：

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.

CodePudding user response：

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.

Word about ::ng-deep deprecation

Word about `::ng-deep` deprecation