Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

97
Views
How to make a variable css height for a div in Angular CLI V12

I'm fairly new to developing in Angular and I'd like some help with finding the best way to create a variable CSS height in Angular CLI V12. To simplify my question by a lot I'll present my problem as follows. I've got three boxes as seen below.

Picture of boxes:

enter image description here

These three boxes were made by three components. The code of which is below.

app.component.html:

<app-top></app-top>
<app-center></app-center>
<app-bottom></app-bottom>

top component:

.box {
    width: 500px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 0;
}
<div class="box">top box</div>

center component:

.box {
    width: 500px;
    height: 100px;
    padding: 10px;
    border: 5px solid green;
    margin: 0;
}
<div class="box">center box</div>

bottom component:

.box {
    width: 500px;
    height: 100px;
    padding: 10px;
    border: 5px solid yellow;
    margin: 0;
}
<div class="box">bottom box</div>

What I want to do here is change the height of the center box dynamically through a variable in the typescript portion of my Angular project. I don't think what I'm trying to do here is all that complicated but all the sources I find online for this are somewhat outdated and a bit confusing to follow if you are new to the development scene. What would be the best way to go about doing this? Thank you.

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

You can just use ngStyles to add style to html tags. For eg:

<div class="box" [ngStyle]="{'height': myCustomHeight}">center box</div>

Here "myCustomHeight" will be the variable whose value you can change accordingly in typescript.

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs