сохранить позицию div, если он не отображается

Question

Я пытаюсь использовать ngIf для отображения div в моем коде. Моя проблема в том, что когда «код» равен нулю, мой div не будет отображаться (как и ожидалось), но код ниже его не будет оставаться на своем месте, он появится. Как я могу сохранить «сборы», когда «коды» не отображаются?

У меня есть такая структура:

<div class="col-6">
    <div *ngIf="code">
        <small><b>Codes: </b></small><br>
           {{code}}<br>
    </div>
    <hr>
    <small><b>Fees</b></small><br>
      {{fees}}$
</div>

Answer 1

Одним из решений, которое могло бы помочь, было бы обернуть ваш div ngIf внутри другого div со свойствами, которые есть в div ngIf, например:

<div> <== this one will take the style properties from its child.
    <div *ngIf="code"> <== here you remove the styles and let it be just a wrapper.
        <small><b>Codes: </b></small><br>
           {{code}}<br>
    </div>
</div>

Свойство может быть, например, "height", поэтому он сохранит высоту независимо от того, существует код внутри или нет.

Answer 2

вместо *ngIf используйте [hidden].

Разница:

*ngIf="false", элемент удален из DOM [hidden]="true", в css* не отображается 1009 *