Good day to all! There is a need to set the style of the class in the component PrimeNG. At first glance, a simple task, but stylization of a component only in the documentation is obvious through specifying inline style. Component rewrite I see no reason for this. Part View from the Angular component

<style> .data { font-weight: bold; } </style> <input type="text" pInputText [(ngModel)]="mdl_" (keypress)="onKey($event)" [style]="'font-weight':'bold'"/>

So, as cited the code, I do not want. It is necessary to use the data class. How to specify it in style? Thanks for the help.

    2 answers 2

    Perhaps I did not understand the question, but what prevents to explicitly indicate the class

     <input type="text" pInputText [(ngModel)]="mdl_" (keypress)="onKey($event)" class="data"/>

    If there is a certain condition under which you need to choose from several classes, then use the directive [class.{name of css class}]

     <input type="text" pInputText [(ngModel)]="mdl_" (keypress)="onKey($event)" [class.data]="someCondition"/>
    • viewEncapsulation interferes - embarq

    Styles of any component by default will have a postfix of the form _ngcontent-${id} . It is added in the case of encapsulation: ViewEncapsulation.Emulated in the Component decorator. Styles for PrimeNg components are specified as body .component-class { ... } . This is the answer to why classes do not work - the weight of selectors (the postfix version is "heavier").

    There are several workaround options:

    1. Use special selector ::ng-deep (> 4.3.0) or /deep/ / >>> (<4.2.6)
    2. Set encapsulation: ViewEncapsulation.None . It will be possible to "steal" classes, but at the expense of encapsulating the component. Would not advise in the case of medium / large projects.
    3. Reassign PrimeNg styles in the style.css file (in the case of c angular-cli). The downside is that interrupting styles directly - bad practice, can lead to peculiar bugs and support price hike. The positive effect can be observed only in the case of using the html / css framework (bootstrap, foundation, bulma etc.), when you need to unify the components (buttons, input fields)
    4. Noticed recently in the documentation for the angular-material advice, add a link to the style of the vendor component in the styleUrls array, which will allow everyone to keep and edit within the component without compromising encapsulation and best-practices. As I understood: this will work only in the case of the modularity of the library of components, where each component has its own style file
    • Thank you embarq for help. The project is close to the average in scale, used option 3 - redefined the styles of PrimeNG components, not the fact that this is correct, but still ... - Andrew