Display No Reviews message when there are no reviews in angular-CodePudding

I just to display No Reviews message for the user who don't have any reviews. Currently when the Review button is pressed, it shows the reviews for the user who have the reviews, but if any user who don't have any review, Review Button pressing show nothing.

Here is the code

<div   (click)="getReviews(item.offer_by.id)">
     <button type="button"  >Reviews</button>
</div>

<div  *ngFor="let items of reviews" >
   <div  *ngIf="items.tasker_id == item.offer_by.id">
      <h6>{{items.name}}</h6>
      <div >
          <div >
          <svg width="16" height="16"  viewBox="0 0 24 24"  *ngFor='let in of 
          counter(items.review_rating) ;let i = index'>
          <path d="M16.2 8.16l4.74.73a1.23 1.23 0 01.67 2.11l-3.46 3.28a1.23 1.23 0 00-.37 1.1l.77 4.68a1.24 1.24 0 01-1.82 1.29L12.5 19.1a1.28 1.28 0 00-1.16 0l-4.27 2.17A1.25 1.25 0 015.27 20l.85-4.68a1.19 1.19 0 00-.34-1.09l-3.41-3.4a1.23 1.23 0 01.71-2.1l4.75-.64a1.26 1.26 0 00.95-.67l2.16-4.24a1.25 1.25 0 012.24 0l2.09 4.28a1.22 1.22 0 00.93.7z">
          </path>
          </svg>
       </div>
    </div>

           <p>({{items.review}})</p>
        <hr>
     </div>
</div>

CodePudding user response：

You can use something like that:

<ng-container *ngIf="reviews?.length > 0; else noReview">
  <div  *ngFor="let items of reviews">
  [...]
  </div>
</ng-container>

<ng-template #noReview>
  <p>Sorry there is no review yet...</p>
</ng-template>

CodePudding user response：

You can check if there are reviews in the container div and iterate the iterate the reviews using a ng-container.

<div  *ngIf="reviews.length > 0">
   <ng-container *ngFor="let items of reviews">
      ...
   </ng-container>
</div>

Edit: Invert div and ng-container, otherwise there would be multiple reviews inside a single container.

<ng-container *ngIf="reviews.length > 0">
   <div  *ngFor="let items of reviews">
      ...
   </div>
</ng-container>