Changing the length of a shape based on a given value - html

Question

I have designed a card-shaped rectangle, that has an inside integer value which is obtained from an angular module/class/type script.... I want to change the height of the shape based on the inside value: the larger the value, the longer the height of the rectangle.
so far, this is my code
<div class = "card">
<div class="content">
<p id = "name">
{{Card.lesson.Name}}
</p>
<p id = "time">
{{Card.duration.Hours}}
<span>
:
{{Card.duration.Minutes}}
</span>
</p>
</div>
<div class = "shape">
</div>
</div>
.card
{
width : 100px;
height : 150px;
background :#FFFFFF;
border: 1px solid #EEE2FA;
border-radius : 10px;
position: relative;
}
#name
{
position: relative;
text-align:center;
font-size:15px;
top:30px;
}
#time
{
position: relative;
text-align:center;
font-size:15px;
top:50px;
}
.shape
{
position: absolute;
display: block;
height:85%;
width: 3px;
background-color: blue;
padding-top: 0px;
top: 10px;
border-radius: 4px;
right: auto;
left: 8px;
padding-left: 8px;
}
The problem is, I have no Idea how to do so. how can I possibly relate Card.Duration.Hours to the height of the card?

Answer 1

You can use ngStyle to do so
You code will be like this:
<div class = "card" [ngStyle]="{'height': Card.duration.Hours + 'px'}">
<div class="content">
<p id = "name">
{{Card.lesson.Name}}
</p>
<p id = "time">
{{Card.duration.Hours}}
<span>
:
{{Card.duration.Minutes}}
</span>
</p>
</div>
<div class = "shape">
</div>
</div>
You can specify your own unit intead of px
Hope it helps.