conditional style padding based on array length

Admin 1
Viewed 420

How do we set padding-top to 10px if only model.leaseTransactionDto.wagLeaseLandlordDto length is greater than 1?

What is the correct syntax to conditional set padding based on the length. Thanks.

#sample code

<div *ngFor="let landlord of model.leaseTransactionDto.wagLeaseLandlordDto; let i = index" style="padding-top:10px">
                        <div class="primary-color" style="text-overflow: ellipsis;overflow-x: hidden;font-size: 12px;" matTooltip="{{landlord.landLordEmail}}" *ngIf="landlord.landLordEmail">{{landlord.landLordEmail}}</div>
                    </div>
angular typescript
2 Answers

It is possible to set ngStyle conditionally based on model.leaseTransactionDto.wagLeaseLandlordDto.length:

<div class="primary-color" 
    [ngStyle]=" {'padding-top': 
    model.leaseTransactionDto.wagLeaseLandlordDto.length > 1 ? '10px' : ''}

    matTooltip="{{landlord.landLordEmail}}" *ngIf="landlord.landLordEmail">
    {{landlord.landLordEmail}}
</div>
user_16462400

Try ngstyle property with condition

<div *ngFor="let landlord of model.leaseTransactionDto.wagLeaseLandlordDto; let i = index" [style.padding-top]="model.leaseTransactionDto.wagLeaseLandlordDto.length > 1 ? '10px' : '0px'">
     <div class="primary-color" style="text-overflow: ellipsis;overflow-x: hidden;font-size: 12px;" matTooltip="{{landlord.landLordEmail}}" *ngIf="landlord.landLordEmail">{{landlord.landLordEmail}}</div>
</div>
user_122672020
Related