The following two ng-containers are used according to screenMode to add a user and navigate to the corresponding screen to edit. Therefore the code of the both ng-containers are same and only the text of the second anchor tags are different. Instead of writing the same code again and again, I need to use and common ng-template for this. Therefore, how to enter the correct template for this? The template I created is as follows. Any suggestion would be appreciated.

<ng-container *ngIf="screenMode == screenStateEnum.ADD_USER">
   <div class="breadcrumb">
      <ol aria-label="breadcrumb">
         <li>
            <a id="ep-list"
               class="hyperlink"
               (click)="screenMode = screenStateEnum.VIEW_USER">View User</a>
         </li>
         <li>
            <a class="current">Add new User</a>
         </li>
      </ol>
   </div>
   <add-user [screenMode]= "'add'" [userId]="selectedRow?.id"
   (goToUser)="refresh()"></-add-user>
</ng-container>

<ng-container *ngIf="screenMode == screenStateEnum.EDIT_USER">
   <div class="breadcrumb">
      <ol aria-label="breadcrumb">
         <li>
            <a id="ep-list"
               class="hyperlink"
               (click)="screenMode = screenStateEnum.VIEW_USER">View User</a>
         </li>
         <li>
            <a class="current">{{selectedRow?.user_name}}</a>
         </li>
      </ol>
   </div>
   <add-user [userId]="selectedRow?.id" [screenMode]= "'Edit'"
   (goToUser)="refresh()"></add-user>
</ng-container>

Template I created to replace the above code

<ng-template [ngIf]="screenMode == screenStateEnum.ADD_USER || screenMode == screenStateEnum.EDIT_USER" #userScreens>
<div class="breadcrumb">
   <ol aria-label="breadcrumb">
      <li>
         <a id="ep-list"
            class="hyperlink"
            (click)="screenMode = screenStateEnum.VIEW_USER">View User</a>
      </li>
      <li>
         <a class="current">{{screenMode === screenStateEnum.ADD_USER ? Add new User: selectedRow?.user_name}}</a>
      </li>
   </ol>
</div>
</ng-template>