0

I am trying to create a 4-column table using row-col div combination for a list with label and value items. The catch is - I don't wanna display any list item that does not have value in it. Not sure how to implement using *ngFor and *ngIf (as they both can't be used on the same element. Any help would be much appreciated. Here's my code sample

EDIT: Got it correct using <ng-container>. UPDATED code below

<div class="container">

    <div class="row" *ngIf="myList && myList.length > 0">

        <ng-container *ngFor="let myField of myList">

            <div class="col-6" *ngIf="myField.udfDisplayValue">

                <div style="width: 50%; display: inline-block">
                    <b>{{ myField.fieldName }}</b>
                </div>

                <div style="width: 50%; display: inline-block;">
                    {{ myField.displayValue }}
                </div>

            </div>
        </ng-container>
    </div>
</div>
Avdhut Mankavale
  • 395
  • 3
  • 12
  • 3
    Not sure if I understood exactly what you want, but you can use `*ngFor` on a `` element. Useful links https://angular.io/guide/structural-directives and https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/ – João Ghignatti Mar 20 '19 at 21:32
  • 1
    answered here, https://stackoverflow.com/questions/54429102/how-to-write-a-condition-with-ngfor-to-check-two-values/54429305#54429305 – devDan Mar 20 '19 at 21:36
  • Possible duplicate of [Else statement in Angular](https://stackoverflow.com/questions/41265553/else-statement-in-angular), or numerous other methods like simple css of like `div.col-6:empty { display:none }` or other techniques, just have to pick what's best for the instance. – Chris W. Mar 20 '19 at 21:51
  • @ChrisW. This helps. But using `` with ngFor provides a quick solution. Thanks! – Avdhut Mankavale Mar 20 '19 at 22:06
  • @JoãoGhignatti. Using `` solved my problem. Thanks for the help! – Avdhut Mankavale Mar 20 '19 at 22:07

1 Answers1

0

you can use [hidden] instead of *ngIf

pbachman
  • 934
  • 2
  • 11
  • 18