Angular, ng-templates with if condition

Question

I want to call for two separate templates according to role id changes. I can get my role which role as

ngIf="rolet.role.id== adminRoleId

two templates are,

<ng-template #role ></ng-template>

and

<ng-template #admin ></ng-template>

Answer 1

I really don't know how many role in your project. But if you want to use two ng-template,check and test with the following code.

<div *ngIf="ngIf="rolet.role.id== adminRoleId; then #role else #admin"></div>
<ng-template #role>
  ...
</ng-template>
<ng-template #admin>
  ....
</ng-template>

Answer 2

You can always use a switch case. It's faster and say cleaner (personal opinion)

<div [ngSwitch]="num">
      <div *ngSwitchCase="'1'">One</div>
      <div *ngSwitchCase="'2'">Two</div>
      <div *ngSwitchCase="'3'">Three</div>
      <div *ngSwitchCase="'4'">Four</div>
      <div *ngSwitchCase="'5'">Five</div>
      <div *ngSwitchDefault>This is Default</div>
   </div>

Answer 3

I put them in separate div tags like this

 <div *ngIf="rolet.role.id== adminRoleId">
  <ng-template #adimn></ng-template>
</div>

 <div *ngIf="rolet.role.id!= adminRoleId">
  <ng-template #role></ng-template>
</div>