angular custom css class is not appening in view - html

Question

I am working on angular formio, in that I am using a custom css class, name CustomCSS I have added the same in css file as follows
Here is stackblitz
app.component.scss
.CustomCSS {
margin: auto;
width: 50%;
border: 3px solid rgb(1, 248, 1);
padding: 10px;
background-color: coral;
}
app.component.ts
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
ngOnInit() {
debugger;
this.triggerRefresh = new EventEmitter();
this.http.get('http://....')
.subscribe(
response => {
this.form = response.json();// this is my html script from DB
},
err => {console.error(err)}
);
}
}
app.component.html
<formio [refresh]="triggerRefresh" [form]="form" [submission]="submission" (submit)="onSubmit($event)"></formio>
My Html this.form script as follows
{
"components":[
{
"label":"City",
"widget":"choicesjs",
"customClass":"CustomCSS",
"tableView":true,
"data":{
"values":[
{
"label":"abc",
"value":"abc"
]
},
"selectThreshold":0.3,
"calculateServer":false,
"validate":{
"required":true
},
"key":"city",
"type":"select",
"indexeddb":{
"filter":{
}
},
"input":true
},
{
"type":"button",
"label":"Submit",
"key":"submit",
"disableOnInvalid":true,
"input":true,
"tableView":false
}
],
"id":4
}
In my script also the css class name available but it is not appending in the view.

Answer 1

One possible way to make it work from your component is to modify the style encapsulation for that component.
import { Component, OnInit, ViewEncapsulation } from '#angular/core'; // <-- add ViewEncapsulation
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None // <-- add this line
})
More information on encapsulation.
That being said.
I still recommend to use global styles and implement css selectors to target formio generated html elements like in your example:
#app formio .control-label {
font-weight: bold;
}