CODEWITHSUNDEEP
angulartypescriptangular7
user10917344
user10917344

Reputation:

Angular *ngIf Condition with OR in component html

I am trying to get an *ngIf with an OR but the second option is ignored.

Here is the code:

<div *ngIf="router.url != '/one' || router.url != '/two'">
  show something
</div>

How can I get this to work?

Upvotes: 3

Views: 9628

Answers (5)

jo_va
jo_va

Reputation: 13963

Check your values to make sure the problem is not related to your data and replace != by !==.

However, in your case, I think you should be using and &&, because with an ||, your div will show up since if your route is /one or /two the condition will be true.

Try this:

<div *ngIf="router.url !== '/one' && router.url !== '/two'">
  show something
</div>

Which is the same as:

<div *ngIf="!(router.url === '/one' || router.url === '/two')">
  show something
</div>

Upvotes: 0

Pedro Lima
Pedro Lima

Reputation: 1606

Your condition is always true, because it checks if a value is either different from either one or another. So the condition would only be false if router.url were at the same time equal to both '/one' and '/two', which is logically impossible.

Upvotes: 0

Arman P.
Arman P.

Reputation: 4394

That's correct that you second condition is ignored, as when router.url != '/one' it already satisfies condition and second one is never evaluated, try this way

<div *ngIf="!(router.url == '/one' || router.url == '/two')">
  show something
</div>

Upvotes: 2

Daniel
Daniel

Reputation: 1042

Using router.url != '/one' || router.url != '/two' means:

If router.url != '/one' returns true

If router.url != '/two' returns true

The second condition is never evaluated if the first condition is met because you are using OR

Upvotes: 4

Krzysztof Raciniewski
Krzysztof Raciniewski

Reputation: 4924

Run this code, maybe it'll explain something:

<p>Current URL: {{ router.url }}</p>
<p>Statement: router.url != '/one' - <strong>{{ router.url != '/one' }}</strong></p>
<p>Statement: router.url != '/two' - <strong>{{ router.url != '/two' }}</strong></p>
<p>Statement: router.url != '/one' || router.url != '/two' - <strong>{{ router.url != '/one' || router.url != '/two' }}</strong></p>
<div *ngIf="router.url != '/one' || router.url != '/two'">
  show something
</div>

Upvotes: 0

Related Questions