IF and ElseIF condition in Angular 13

Question

I want to hide the Portfolio and Orders menu.

I succeeded to hide the Portfolio menu with ngIf.

    <ul class="nav-links" *ngIf="menu.route !== '/portfolio'  || (currentPortfolio$ | async)">

My question is, how should I hide /orders with an ElseIf?

    <ul class="nav-links" *ngIf="menu.route !== '/portfolio'  || (currentPortfolio$ | async)" ????>

I don't quite understand, HTML and Angular syntax...


    <ng-container *ngFor="let menu of menus; let i = index">
    <ul class="nav-links" *ngIf="menu.route !== '/portfolio'  || (currentPortfolio$ | async)">
    <li [ngClass]="{ selected: selectedTab === menu.route }">
       <a routerLink="{{ menu.route }}" routerLinkActive="active" (click)="toggleMenu(i); selectedTab = menu.route">
       <i class="{{ menu.class }}"></i>
       <span class="links_name"> {{ menu.item }} </span>
       <i class="{{ menu.arrowDown }} iconArrow" *ngIf="selectedTab !== menu.route || !showSubmenu[i]"></i>
       <i class="{{ menu.arrowUp }} iconArrow " *ngIf="selectedTab === menu.route && showSubmenu[i]"></i>
       </a>
    </li>

EDIT

<ng-container *ngFor="let menu of menus; let i = index">
   <ul class="nav-links" *ngIf="menu.route !== '/portfolio'  || (currentPortfolio$ | async); else elseBlock">
      <li [ngClass]="{ selected: selectedTab === menu.route }">
         <a routerLink="{{ menu.route }}" routerLinkActive="active" (click)="toggleMenu(i); selectedTab = menu.route">
         <i class="{{ menu.class }}"></i>
         <span class="links_name"> {{ menu.item }} </span>
         <i class="{{ menu.arrowDown }} iconArrow" *ngIf="selectedTab !== menu.route || !showSubmenu[i]"></i>
         <i class="{{ menu.arrowUp }} iconArrow " *ngIf="selectedTab === menu.route && showSubmenu[i]"></i>
         </a>
      </li>
      <ng-container *ngFor="let submenu of menu.submenus; let j = index">
         <li *ngIf="showSubmenu[i]">
            <a routerLink="{{ submenu.route }}">
            <i class="{{ submenu.class }} pl20"></i>
            <span class="links_second_name"> {{ submenu.item }} </span>
            </a>
         </li>
      </ng-container>
      <li class="log_out">
         <a href="#" (click)="logoff() ">
         <i class="bx bx-log-out"></i>
         <span class="links_name">Log out</span>
         </a>
      </li>
   </ul>
   <ng-template #elseBlock>
      <ul class="nav-links" *ngIf="menu.route !== '/orders'  || (currentPortfolio$ | async)">
      </ul>
   </ng-template>
</ng-container>

Does this answer your question? [\*ngIf else if in template](https://stackoverflow.com/questions/43812770/ngif-else-if-in-template) — Sara Stoimenovska, Feb 22 '22 at 13:26

score 0 · Accepted Answer · answered Feb 22 '22 at 12:58

0

You can render the alternative template ng-template using the else, like the following:

<ul
  class="nav-links"
  *ngIf="
    menu.route !== '/portfolio' || (currentPortfolio$ | async);
    else elseBlock
  "
>
  <!-- ... -->
</ul>
<ng-template #elseBlock>
  <ul>
    <!-- ... -->
  </ul>
</ng-template>

Read more about showing an alternative template using else here: https://angular.io/api/common/NgIf#showing-an-alternative-template-using-else

answered Feb 22 '22 at 12:58

Amer

6,162
2
8
34

Thank you for your help. I edited my first message with your code. But, I have always the same problem. The `Orders` menu is always displayed. Does my code seem to be correct? – eric Feb 22 '22 at 13:29
Do you mean both blocks are displayed? Even the one within the `ngIf`? – Amer Feb 22 '22 at 13:32
No, just `orders`, the ngIf works – eric Feb 22 '22 at 13:44
If this expression `menu.route !== '/portfolio' || (currentPortfolio$ | async)` is true, then the content of `ul` will be displayed only, otherwise the content of `elseBlock` will be displayed only. – Amer Feb 22 '22 at 13:46

IF and ElseIF condition in Angular 13

1 Answers1