ngIf

{{ cookieAccepted ? 'Elutasítom' : 'Elfogadom' }}

<ng-container *ngIf="isVideoType; then videoThumbnail else imgThumbnail"></ng-container>
          <ng-template #videoThumbnail>
            <figure class="article-card-figure article-card-video">
              <img class="article-card-figure-image" [src]="articleCard?.thumbnail?.url" [alt]="articleCard?.thumbnail?.alt" trImageLazyLoad>
              <i class="icon icon-mandiner-play"></i>
            </figure>
          </ng-template>
          <ng-template #imgThumbnail>
            <figure class="article-card-figure">
              <img class="article-card-figure-image" [src]="articleCard?.thumbnail?.url" [alt]="articleCard?.thumbnail?.alt" trImageLazyLoad>
            </figure>
          </ng-template>

For large DOM element trees

The main difference is that *ngIf will remove the element from the DOM, while [hidden] actually plays with the CSS style by setting display:none.

<div *ngIf="courses.length > 0; then coursesList else noCourses"></div>
<ng-template #coursesList>
    List of courses
</ng-template>

<ng-template #noCourses>
    No courses yet
</ng-template>

Hidden Property

For small DOM element trees

If the hidden property is true hides the element and false shows the element:

<div [hidden]="courses.length == 0">
    List of courses
</div>

<div [hidden]="courses.length > 0">
    No courses yet
</div>