Render element based on its presence in a specific component

Question

I have this reusable component:

      <h4>Our viewers reviews</h4>

      <ul class="list-group" style="color:black" >
        <div *ngIf="userReviews">
        <li class="list-group-item" *ngFor="let r of userReviews;let i=index">
         <p  class="font-weight-bold text-left">{{r.movie}}</p>
          <div class="img-wrapper">
          <img class="img-fluid" src="{{ r.poster }}" alt="{{ r.poster }}" />
        </div>
          <br>
          <p  class="font-weight-bold text-left"> {{r.review}}</p>
          <br>
          <span  class=" font-weight-bold text-left">by </span><span  class="font-italic">{{r.author}} </span>

          <button  style="float:right" (click)="delete()"  class="btn btn-danger">Delete</button>
        </li>
      </ul>
    </div>

I render this HTML in the home component and in the admin component But I want only to show this delete button

<button style="float:right" (click)="delete()" class="btn btn-danger">Delete</button>

on the admin page. On home page delete should be invisible. I think in some solutions but none of them seems good, and it will have repeated code.

Can someone suggest a solution?

Answer 1

Try:

In the re-usable component, do:

@Input() showDeleteButton: boolean;
....
//HTML
 <button *ngIf="showDeleteButton"  style="float:right" (click)="delete()"  class="btn btn-danger">Delete</button>

And in the home component, send false for showDeleteButton and in the admin component, send true for showDeleteButton.