Show html template with if else statement - Angular 8

I'm trying to show a list of items in my basket with a foreach loop and if else statement, I'm getting the list of products from localStorage, I have 3 gender of products : spectacle, restaurant and giftType, when I choose a spectacle and add it to the basket, user should add a restaurant to basket to proceed checkout process, only giftType are separated and user can add it multiple times, my basket should look like this :

this is the html template of my component :

<div id="mySidenavv" class="sidenavv">
  <div class="mySidenavv-content">
    <div class="row">
      <div class="col-md-8 Mon-panier ">Mon panier </div>
      <div class="col-md-2"> <a href="javascript:void(0)" class="closebtn" (click)="closeSideNav()"><img
            src="/assets/img/double-right-arrows-angles.png" alt="">
        </a></div>
    </div>
    <div class="row Divider"></div>
    <div class="item-container">
      <div class="cartItem" *ngFor='let item of cartItems; let i = index; '>
        <div (click)="goToDetails( i )" class="row"
          *ngIf='item.spectacle && item.placesListContent.length > 0; else defaultSpectacle'>

          <div class="col-4 image-content">
            <div class="card-img" [style.background]="'url(' + item.spectacle.sp_visuel + ')'"></div>
            <div class="= Bg-Circle ">
              <div class="col-md-2 Combined-Shape ">
                <button type="button" class="close " aria-label="Close"
                  (click)="removeFromCart(item.spectacle.sp_id, i, 'spectacle')">
                  <img src="/assets/img/times-circle-solid.svg" class="img-close" alt="">

                </button>
              </div>
            </div>
          </div>

          <div class="col-8">
            <div class="row item-title">
              
            </div>
            <div class="row line" *ngFor='let place of item.placesListContent'>
              <img src="/assets/img/tickets.svg" class="tickets-img" alt="">
              <div class="Details"> </div>

            </div>
            <div class="row line">
              <img src="/assets/img/calendar.svg" class="tickets-img" alt="">
              <div class="Details date"></div>

            </div>
            <div class="row line">
              <img src="/assets/img/clock.svg" class="tickets-img" alt="">
              <div class="Details"></div>

            </div>

            <div class="row line-div">
              <div class="col-8 small-Divider"></div>
              <div class="col-4 price"> €</div>
            </div>
          </div>
        </div>
        <ng-template #defaultSpectacle>
          <div class="row">
            <div class="col-4 image-content">
              <div class="card-img" [style.background-color]="'#dddfe7'"></div>
            </div>

            <div class="col-8">
              <div class="row item-title">
                <a (click)="goToShows(i,'restaurant')">Trouver un spectacle</a>
              </div>
              <div class="row line">
                <img src="/assets/img/tickets.svg" class="tickets-img" alt="">
                <div class="Details">A déterminer</div>

              </div>
              <div class="row line">
                <img src="/assets/img/calendar.svg" class="tickets-img" alt="">
                <div class="Details date">A déterminer</div>

              </div>
              <div class="row line">
                <img src="/assets/img/clock.svg" class="tickets-img" alt="">
                <div class="Details">A déterminer</div>

              </div>

              <div class="row line-div">
                <div class="col-8 small-Divider"></div>
                <div class="col-4 price">-</div>
              </div>
            </div>
          </div>
        </ng-template>
        <div (click)="(item.restaurant && item.spectacle) ? goToDetails( i ): ''"
          *ngIf='item.restaurant || !item.type ;else defaultRestaurant;' class="row">
          <div class="col-4 image-content">
            <div class="card-img" [style.background]="'url(' +serverUrl+'/'+item.restaurant.image+ ')'"></div>
            <div class="= Bg-Circle ">
              <div class="col-md-2 Combined-Shape ">
                <button type="button" class="close " aria-label="Close"
                  (click)="removeFromCart(item.restaurant.id, i, 'restaurant')">
                  <img src="/assets/img/times-circle-solid.svg" class="img-close" alt="">

                </button>
              </div>
            </div>
          </div>

          <div class="col-8">
            <div class="item-title">
              
            </div>
            <div class="row line">
              <img src="/assets/img/calendar.svg" class="tickets-img" alt="">
              <div class="Details date" *ngIf='item.restaurant.time'>
                </div>
              <div class="Details date" *ngIf='!item.restaurant.time'>A déterminer</div>
            </div>
            <div class="row line">
              <img src="/assets/img/clock.svg" class="tickets-img" alt="">
              <div class="Details" *ngIf='item.restaurant.time'></div>
              <div class="Details" *ngIf='!item.restaurant.time'>A déterminer</div>

            </div>

            <div class="row line">
              <img src="/assets/img/tray.svg" class="tickets-img" alt="">
              <div class="Details">
                <span class="comma"
                  *ngFor="let formule of item.restaurant.selectedPlacesRestaurant "></span>
              </div>
            </div>
            <!-- <div class="row line-div">
                    <div class="col-8 small-Divider"></div>
                    <div class="col-4 price"> €</div>
                  </div> -->
          </div>
        </div>
        <ng-template #defaultRestaurant>
          <div class="row">
            <div class="col-4 image-content">
              <div class="card-img" [style.background-color]="'#dddfe7'"></div>
            </div>

            <div class="col-8">
              <div class="item-title">
                <a (click)="goToRestaurants(i,'restaurant')">Trouver un restaurant</a>
              </div>
              <div class="row line">
                <img src="/assets/img/calendar.svg" class="tickets-img" alt="">
                <div class="to-be-determined">A déterminer</div>

              </div>
              <div class="row line">
                <img src="/assets/img/clock.svg" class="tickets-img" alt="">
                <div class="to-be-determined">A déterminer</div>

              </div>

              <div class="row line">
                <img src="/assets/img/tray.svg" class="tickets-img" alt="">
                <div class="Details">Formule : Entracte</div>

              </div>
              <div class="row line-div">
                <div class="col-md-8"></div>
                <div class="col-md-4 price"></div>
              </div>
            </div>
          </div>
        </ng-template>

        <div class="row Divider"></div>
        <div class="item-container" *ngIf="item.type && item.amount">
          <div class="cartItem">
            <div class="row">
              <div class="col-4 image-content d-flex justify-content-center text-center">
                <div class="mask">
                  <img class="type-icon" [src]="serverUrl+'/'+item?.icon" alt="">
                </div>
                <div class="= Bg-Circle d-flex justify-content-center text-center">
                  <div class="col-md-2 Combined-Shape-card d-flex ">
                    <button type="button" class="close " aria-label="Close" (click)="removeFromCart()">
                      <img src="/assets/img/times-circle-solid.svg" class="img-close" alt="">

                    </button>
                  </div>
                </div>
              </div>

              <div class="col-6 align-self-center gift-card-desc pl-0">
                <p class="type-desc"> Chèque cadeaux Spectacle + Restaurant <span
                    class="gift-type"></span>
                </p>
              </div>
              <div class="col-2 align-self-center gift-card-desc pl-0">
                <p class="type-price"> € </p>
              </div>
            </div>
            <div (click)="goToDetails()" class="row">
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="cart-footer">
      <div class="row">
        <div class="col-6 purchases-continue"><a (click)="closeSideNav()" class="a">Continuer mes achats</a></div>
        <div class="col-6 totale"> Total :  €</div>
      </div>
      <button class="btn btn-submit form-control  btn-block" (click)='goToCommand()' [disabled]="disableBookBtn">
        <p class="command">Commander</p>
      </button>
    </div>
  </div>
</div>

I got this result :

How can I fix this and show items correctly with ng if directive