Change css value using Angular - css

Question

In my project I'm using a "ngb-progressbar" element to draw a progress-bar.
To manually set the css for this bar I'm using this piece of code:
::ng-deep div.bg-success.progress-bar{
background: linear-gradient(90deg, rgba(54,166,5,1) 0%, rgb(219, 238, 52) 100%) !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
In my TS code I need to set nynamically the value of background-size attribute and to do this I'm looking for a method to access to the element with "::ng-deep".
Removing "::ng-deep" changes have no effect.
Any idea to access my element style via TS code by using ::ng-deep ?

Answer 1

Use the following HTML
<div class="container" [class.someStyle]="yourCondition">
<ngb-progressbar></ngb-progressbar>
</div>
So that you can use the following SCSS
.container {
&.someStyle {
::ng-deep div.bg-success.progress-bar {
// Your new style
}
}
::ng-deep div.bg-success.progress-bar {
background: linear-gradient(90deg, rgba(54,166,5,1) 0%, rgb(219, 238, 52) 100%) !important;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
}
This is the cleanest solution at your disposal. The other solution involves manually changing the HTML with the help of vanillaJS or maybe the Renderer2, which are kind of meh.