Los siguientes dos ng-containers se usan de acuerdo con screenMode para agregar un usuario y navegar a la pantalla correspondiente para editar. Por lo tanto, el código de ambos ng-containers es el mismo y solo el texto de las segundas etiquetas de anclaje es diferente. En lugar de escribir el mismo código una y otra vez, necesito usar ng-template común para esto. Por lo tanto, ¿cómo ingresar la plantilla correcta para esto? La plantilla que creé es la siguiente. Cualquier sugerencia sería apreciada.

 <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>

Plantilla que creé para reemplazar el código anterior

 <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>