Angular 6 में टाइपस्क्रिप्ट कोड से css तक मान कैसे पास करें

Question

मुझे पता है कि मुझे उपयोग करना है ngClassया ngStyleमैं यह पता नहीं लगा पा रहा हूं कि उस मूल्य को कैसे पास किया जाए। यहाँ मेरा कोड है।

strip.component.ts

import { ... } from '@angular/core';

@Component({
    selector: 'app-strip',
    templateUrl: './strip.component.html'
})
export class StripComponent implements OnInit {
    ...
    @Input() widthValue: any; // getting this 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> <!-- this is printing correct value-->
                ...
            </div>
        </div>
    </div>
</ng-container>

मैं कुछ इस तरह से scss में गतिशील रूप से पंक्तियों की चौड़ाई तय करने के लिए है :

strip.component.css

.rows {
    display: inline-block;
    width: calc(100%/widthValue); // <----- here
    text-align: left !important;
    background: red;
}

मैं col-{{widthValue}}HTML में उपयोग कर सकता था , लेकिन नहीं, मुझे बताया गया है कि इसे सीएसएस से चौड़ाई की संपत्ति से होना चाहिए। क्रिप्या मेरि सहायता करे। मुझे यकीन नहीं है कि यहाँ ngClass का उपयोग कैसे करें।

Answer 1

उपयोग class

<div [class]="'col-'+ widthValue"></div>

या

उपयोग style.width

<div [style.width]="(widthValue/12)*100 + '%'"></div>

डेमो