CODEWITHSUNDEEP
cssangulartypescript
al NTM
al NTM

Reputation: 257

How to set TypeScript variable value as CSS property?

I have an image (inside a material card) which changes every 30 seconds. I have the height of the image (as a TS variable) and I want to set it as the height of the loaded image. I tried the below approach but I think that the syntax is wrong. What is the right approach?

@Component({
selector: 'app-live',
templateUrl: 

 <mat-card [ngStyle]="{'min-height': '{{taille}}'}">
  <img  mat-card-image [src]="profileUrl | async " alt="Streaming de la culture" #img [ngStyle]="{'padding-top':'0px' }" (load)="dosomething(img)">
 </mat-card>

export class LiveComponent implements OnInit {

taille;

dosomething(img) { console.log(img.clientWidth, img.clientHeight);
                   this.taille = img.clientHeight;
                   console.log(this.taille);}

Upvotes: 3

Views: 11380

Answers (2)

Adrian
Adrian

Reputation: 3711

The {'min-height': '{{taille}}'} part should in fact be {'min-height': taille}.
Angular documentation presents the below very similar example: 

<div [ngStyle]="{'color': colorPreference}">

From your sample code it seems that taille is initially undefined which you might want to take into account (initialize taille or use a ngIf or other approach).

Upvotes: 5

Nakul Sharma
Nakul Sharma

Reputation: 534

Using [ngStyle] - 

<mat-card [ngStyle]="{'min-height': taille}">

Or you can use [style.min-height] = "taille" instead.

<mat-card [style.min-height] = "taille">

please go through this for more insights.

Upvotes: 3

Related Questions