CODEWITHSUNDEEP
angulartypescript
CreativeDip
CreativeDip

Reputation: 184

ngIf multiple conditions not working with router.url

I am trying to hide a div based on routes. If the router url is login or forgot password than hide the div.Here is the code and its not working.

<div class="isNotLogin" *ngIf="router.url != '/login' || router.url != '/forgot-password'">
hide this content
</div>

But its working for single condition:

<div class="isNotLogin" *ngIf="router.url != '/login'">
hide this content
</div>

Any Idea?

Upvotes: 0

Views: 3343

Answers (2)

SiddAjmera
SiddAjmera

Reputation: 39432

Adding on to @Suresh's answer, according to Angular Style Guide, you should put presentation logic in the Component Class instead of the template itself. This improves testability, maintainability, and reusability.

Move the logic to show/hide the div in a function in the Component Class and then call it from *ngIf in your template.

@Component({ ... })
export class YourComponent {

  ...

  shouldShow() {
    return !(router.url === '/login' || router.url === '/forgot-password');
  }

  ...

}

And in your template.

<div 
  class="isNotLogin" 
  *ngIf="shouldShow()">
  hide this content
</div>

Upvotes: 1

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

If you want to hide Div only if login or password. you need to use ===.

<div class="isNotLogin" *ngIf="!(router.url === '/login' || router.url === '/forgot-password')">
hide this content
</div>

Upvotes: 5

Related Questions