Trying to work with ngClass or ngStyle, but I'm struggling with passing the value. Here's my current code:
strip.component.ts
import { ... } from '@angular/core';
@Component({
selector: 'app-strip',
templateUrl: './strip.component.html'
})
export class StripComponent implements OnInit {
...
@Input() widthValue: any; // received from parent component
staticKpi:{...}=[][]
}
strip.component.html
<ng-container>
<div *ngFor="let row of staticKpi">
<div class="rows" *ngFor="let item of row">
<div class="col-12">
<h2>{{widthValue}}</h2> <!-- correctly displaying the value-->
...
</div>
</div>
</div>
</ng-container>
Attempting to dynamically set the width of the rows class in Sass:
strip.component.css
.rows {
display: inline-block;
width: calc(100%/widthValue); // <----- here
text-align: left !important;
background: red;
}
I considered using col-{{widthValue}} in HTML, but was instructed to utilize the width property in CSS instead. Any assistance on how to implement ngClass here would be greatly appreciated.