HOW TO MAKE A BOOT APPEAR ONLY TO THE ADMINISTRATOR

Question

Can someone help me? I’m trying to make an admin page but I’m having difficulties, because anyone who logs in to the application, will see the button (ADD PRODUCTS) and (Delete products), because they are visible, I made an API with Firebase and already managed to make the routes safer, because only with the id of who created the product can delete and change, but how to make the buttons visible only with the Adm ID ?

BELOW A LITTLE CODE:

Our Flavors

    <ion-label color="favorite-rosa">
      <p>{{ product.name }}</p>
      <p>{{ product.description }}</p>
      <p>{{ product.createdAt | date: 'short' }}</p>
      <ion-note slot="end" color="primary" *ngIf="product.price">{{ product.price | currency: 'BRL' }}</ion-note>
    </ion-label>
    <ion-badge color="favorite-rosa" >Fazer Pedido</ion-badge>
  </ion-item>

  <ion-item-options side="end">
    <ion-item-option color="danger" (click)="deleteProduct(product.id)">
      <ion-icon slot="top" name="trash"></ion-icon>
      Excluir
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

Come out

    <ion-col size="6">
      <ion-button routerLink="/details" expand="block">
        Add produto
      </ion-button>
    </ion-col>
  </ion-row>
</ion-grid>

Answer 1

Do with ngIf, follow example of the button appearing for user of type administrate and the other only appearing for who is not administrator:

<ng-container *ngIf = "usuario === 'Administrador' ">
<ion-button>
</ion-button>
</ng-container>

<ng-container *ngIf = "usuario !== 'Administrador' ">
<ion-button>
</ion-button>
</ng-container>

Answer 2

You could do this for a URL with Web view, show only this text when it is on the home page and the others does not show