How to use the common ng-template to navigate to the screens for adding and editing a user?

Viewed 32

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>

1 Answers

Try below Steps

  1. Create a Parent Ng-Template for Add uer & Edit user (because HTML is same)
  2. Then add that Template before
  3. Change ng-container to work with both condition (screenMode = addUser || editUser)
  4. Set template to match above condition
  5. Using ternary change anchor tag HTML you want
  6. Pass the screenMode as container's screenMode
Related