Search code examples
angularstylesmarginangular-ng-if

Angular ngIf+else with style

This is what I want to do

If value(depth) = 1 --> margin-left:10px
else value(depth) = 2 --> margin-left:20px
else value(depth) = 3 --> margin-left:30px

ex) value * 10px

I wrote the following code myself but it doesn't work. 

<div class="comment" *ngIf="comment.depth === 1" style="margin-left:10px">
<div class="comment" *ngIf="comment.depth === 2" style="margin-left:20px">
<div class="comment" *ngIf="comment.depth === 3" style="margin-left:30px">

How should I change the code to make it work?

Solution

  • You can use style that dependent of the current depth value.
    here is an example to get the idea:

    HTML

    <div class="comment" [style.marginLeft.px]="getDepth(comment.depth)">

    TS

    getDepth = (depth) => {
 return depth*10;
}