How to set TypeScript variable value as CSS property?

Question

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);}

Remove {{ and }}

Trash Can
– Trash Can

2018-11-28 16:53:18 +00:00
Commented Nov 28, 2018 at 16:53 — Trash Can
– Trash Can, Commented Nov 28, 2018 at 16:53
better said remove '{{ and }}' around taille

Adrian
– Adrian

2018-11-28 18:12:58 +00:00
Commented Nov 28, 2018 at 18:12 — Adrian
– Adrian, Commented Nov 28, 2018 at 18:12

Adrian · Accepted Answer · 2018-11-28 18:16:38Z

5

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).

edited Nov 28, 2018 at 18:16

answered Nov 28, 2018 at 18:03

Adrian

3,8014 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nakul Sharma · Accepted Answer · 2018-11-28 17:50:40Z

3

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.

edited Nov 28, 2018 at 17:50

answered Nov 28, 2018 at 17:43

Nakul Sharma

5541 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to set TypeScript variable value as CSS property?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related