Angular 6에서 typescript 코드의 값을 CSS로 전달하는 방법

Dec 02 2020

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에서 사용할 수 있었지만 아니요, CSS의 width 속성에서 가져와야한다고 들었습니다. 제발 도와주세요. 여기서 ngClass를 사용하는 방법을 모르겠습니다.

답변

1 Vishnudev Dec 02 2020 at 18:13

사용하다 class

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

또는

사용하다 style.width

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

데모