Conditionally eliminate list items in *ngFor - Angular 6

Question

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>

Answer 1

you can use [hidden] instead of *ngIf