Angular's *ngIf doesn't work on a re-routing

Question

I am having trouble with the way *ngIf works in Angular. I have a navbar component that does a check and should render different lists based on true/false response, it works properly in that regard, but after a routing to a different page it stops working until I refresh a page again.

HTML:

   <div *ngIf="isUserValid(); then logged_in else logged_out"></div>
      <ng-template #logged_out>
        <ul class="dropdown-menu  dropdown-menu-dark dropdown-menu-end" aria-labelledby="navbarDropdown">
          <li>
            <p class="dropdown-item">You are not logged in!</p>
          </li>
          <li><hr class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item" routerLink="/login"> Login </a>
          </li>
          <li>
            <a class="dropdown-item" routerLink="/signup"> Sign-Up </a>
          </li>
        </ul>
      </ng-template>
      <!-- If user is logged in -->
      <ng-template #logged_in>
        <ul class="dropdown-menu  dropdown-menu-dark dropdown-menu-end" aria-labelledby="navbarDropdown">
          <li>
            <p class="dropdown-item">Hi, [user's name]</p>
          </li>
          <li><hr class="dropdown-divider"></li>
          <li>
            <a class="dropdown-item" (click)="quit()" routerLink="/login"> Sign-Out </a>
          </li>
        </ul>
      </ng-template>

TS (this is what happens when quit is clicked):

  quit(): void{
    this.is_valid_user = false;
    localStorage.clear();
    this.router.navigate(['login']).then(r => console.log('user quit'));
  }

  isUserValid(): boolean{
   return this.is_valid_user;
  }

When you click on sign-out button it should redirect and show the logged-out block but it shows nothing and only does so after a page refresh. Any help is appreciated.

Does this answer your question? [How to reload the current route with the angular 2 router](https://stackoverflow.com/questions/40983055/how-to-reload-the-current-route-with-the-angular-2-router) — developer033, Aug 11 '21 at 15:56

score 0 · Accepted Answer · answered Aug 11 '21 at 14:34

0

In angular you have to know that a component gets initialized once. A router link does not change the component's state. A full refresh starts the angular lifecycle again. So I assume your "isUserValid()" is only executed once. Could you please provide the complete typescript file? Where did you place the "isUserValid()" method?

answered Aug 11 '21 at 14:34

CarlitosJan

183
8

added the method isUserValid() to questtion. The quit() and isUserValid() are in the same component TS file. The isUserValid() does get called on rerouting (I tested it with logs) but html doesn't seem to render properly – PurryFury Aug 11 '21 at 14:38
Ok thank you. Then the isUserValid() method will only be executed once or by refreshing the page. I have never done that particular functionality, but what you have to do is, listen to the "navigation change" and then check if the user is valid. Maybe this can help: https://newbedev.com/javascript-angular-10-execute-a-function-when-the-router-link-changes-code-example – CarlitosJan Aug 11 '21 at 14:44
this helped, I used that snippet and then forced Angular to detecct changes through ChageDetectorRef – PurryFury Aug 11 '21 at 16:58

score 0 · Answer 2 · answered Aug 11 '21 at 14:55

You can also simplify your *ngIf:

 <ng-container *ngIf="isUserValid(); else logged_out">
   <ul class="dropdown-menu  dropdown-menu-dark dropdown-menu-end" aria-labelledby="navbarDropdown">
      <li>
        <p class="dropdown-item">Hi, [user's name]</p>
      </li>
      <li><hr class="dropdown-divider"></li>
      <li>
        <a class="dropdown-item" (click)="quit()" routerLink="/login"> Sign-Out </a>
      </li>
    </ul>
</ng-container>
<ng-template #logged_out>
    <ul class="dropdown-menu  dropdown-menu-dark dropdown-menu-end" aria-labelledby="navbarDropdown">
      <li>
        <p class="dropdown-item">You are not logged in!</p>
      </li>
      <li><hr class="dropdown-divider"></li>
      <li>
        <a class="dropdown-item" routerLink="/login"> Login </a>
      </li>
      <li>
        <a class="dropdown-item" routerLink="/signup"> Sign-Up </a>
      </li>
    </ul>
  </ng-template>

Angular's *ngIf doesn't work on a re-routing

2 Answers2