TypeScript function to set height in NgStyle does not work

Question

I have designed a shape and I want to determine its height based on a TypeScript-function, but the ngStyle does not apply the height to the shape.

HTML:

<div class = "card" [ngStyle] = "{'height': CalculateHeight()}" (click) = 'onSelect()'>

Function:

CalculateHeight(): number {
  let CardHeight = ((this.Card.duration.Hours * 60) +
    (this.Card.duration.Minutes)) * 2;

  if (CardHeight <= 60) {
    CardHeight = 60;
  }

  console.log(CardHeight);

  return CardHeight;
}

What is the problem?

Hi @Dorian, as you can see there ar several answers to your question. Please mark as the right answer, if someone solved your issue. To lean more about how Stack Overflow works, [take the tour](https://stackoverflow.com/tour). — jsadev.net, Jul 24 '19 at 05:49

score 10 · Accepted Answer · answered Jul 10 '19 at 08:22

10

CalculateHeight returns just a number. But height to work properly, there need to be the unit as well.

Try the following line.

< div class = "card" [ngStyle] = "{'height.px': CalculateHeight()}" (click) = 'onSelect()' >

Note the .px. It will do the trick.

OR. you can make CalculateHeight to return a string with the height unit attached at the end. For example 400px.

answered Jul 10 '19 at 08:22

Johna

1,836
2
18
29

Would be nice if can include the way of `[style.height.px]="CalculateHeight()"` too – Icycool Jul 10 '19 at 08:49

score 3 · Answer 2 · answered Jul 10 '19 at 08:43

3

You will also need px in your html file like this

<div class="card" [ngStyle]="{'height': CalculateHeight() + 'px'}" (click)="onSelect()">

answered Jul 10 '19 at 08:43

Tony Ngo

19,166
4
38
60

jsadev.net · Answer 3 · 2019-07-11T09:21:20.683

1

The problem is that you don't set any unit to your height.. its like "300 what?, eggs?, cars?, pixels?" :P

Just return your result with a valid unit. This could simply be done by adding + 'px' to your returned value:

CalculateHeight(): number {
  let CardHeight = ((this.Card.duration.Hours * 60) +
    (this.Card.duration.Minutes)) * 2;

  if (CardHeight <= 60) {
    CardHeight = 60;
  }

  console.log(CardHeight);

  return CardHeight + 'px';
}

You should also change your HTML from (click)='onSelect()' to (click)="onSelect()" because its recommend to use doublequotes instead of singlequotes, when quoting attributes values.

To learn more take a look at the recommend style-rules, especialy for HTML Quotation Marks.

edited Jul 11 '19 at 09:21

answered Jul 10 '19 at 08:24

jsadev.net

2,800
1
16
28

@Icycool yes, i've never seen this before and tried it directly in jsfiddle. – jsadev.net Jul 10 '19 at 08:38
You're right, my fault. i've testet it with an space between `<` and `div`. Thats not what the OP have done. I have to take a closer look, next time. Edited my answer. – jsadev.net Jul 10 '19 at 10:00
And the single/double quote should be interchangeable – Icycool Jul 10 '19 at 15:40
but bad practice. – jsadev.net Jul 11 '19 at 07:10
You can refer to this question https://stackoverflow.com/q/2373074/5039495 – Icycool Jul 11 '19 at 07:21

TypeScript function to set height in NgStyle does not work

3 Answers3