Need help with an *ngIf statement using OR in Angular, but the second condition is not working as expected.
See below for the code:
<div *ngIf="router.url != '/one' || router.url != '/two'">
show something
</div>
Any suggestions on how to fix this issue?
When you use the code snippet
router.url != '/one' || router.url != '/two'If router.url != '/one' evaluates to true
If router.url != '/two' evaluates to true
The second condition is not assessed if the first condition is satisfied, due to the usage of OR operator.
It is important to note that the second condition is disregarded in this scenario. When router.url != '/one', it already fulfills the condition, and the second one is never checked. You can try implementing it like this:
<div *ngIf="!(router.url == '/one' || router.url == '/two')">
Display something
</div>
Here is some code that might provide some insight:
<p>Current URL: {{ router.url }}</p>
<p>Condition: router.url != '/one' - <strong>{{ router.url != '/one' }}</strong></p>
<p>Condition: router.url != '/two' - <strong>{{ router.url != '/two' }}</strong></p>
<p>Condition: router.url != '/one' || router.url != '/two' - <strong>{{ router.url != '/one' || router.url != '/two' }}</strong></p>
<div *ngIf="router.url != '/one' || router.url != '/two'">
display something
</div>
The given statement will remain valid at all times, as it verifies the difference of a value from one or another. Therefore, the condition can only be deemed false if variable router.url simultaneously equates to both '/one' and '/two', which is theoretically impossible.
Double-check your values to ensure that the issue is not related to your data and switch out != with !==.
In this scenario, I recommend using && instead of ||, because if your route is either /one or /two, the condition will evaluate to true and your div will be displayed.
You can try the following code:
<div *ngIf="router.url !== '/one' && router.url !== '/two'">
show something
</div>
This is equivalent to:
<div *ngIf="!(router.url === '/one' || router.url === '/two')">
show something
</div>
I thought this would be a simple task, but I'm having trouble figuring it out. There are three checkboxes and I need to ensure that the user selects only one. The validator should check if any of the other two checkboxes have been selected and preven ...
I'm facing an issue with my map function where it is not waiting for the request response before moving on to the next index. this.products = []; productList.map((product) => { this.productService.getProductInfo(product).subscribe(productData => ...
Currently, I am developing a tool that involves extracting data from Jira. While I have come across numerous examples of chaining multiple http calls one after another using data from the previous call, I am facing a challenge in making the outer call wait ...
I am facing an issue with selecting objects from a dropdown list. The array called "devices" stores a list of Bluetooth devices. Here is the HTML code: <select (change)="selectDevice($event.target.data)"> <option>Select ...
I want to make material 2 input control larger by adjusting the height property of the input using CSS <input mdInput placeholder="Favorite food" class="search-grid-input"> .search-grid-input { height:30px!important; } As a result, the image o ...
Implementing conditional validation in the class-validator library using the given example, I need to ensure that validation fails if the woodScrews property is assigned a value when the tool property is set to Tool.TapeMeasure. I've searched extensiv ...
I'm having trouble with my Angular app and creating a gallery of photos from my Samsung Galaxy. I am using the "object-fit: cover" css attribute for a nice design, but it only seems to work correctly when the image has an EXIF "orientation" property e ...
Is it possible to change the CSS style of an angular material stepper based on its orientation? For instance, can we set a red background when the stepper is displayed vertically and a blue background when horizontal? ...
I am encountering an issue with a div using ngClass and ngIf conditions: <div [ngClass]="{ 'active': nbActive === 1 }" > <!-- some stuff --> </div> There is also a similar div using a ngIf condition: <div *ngIf="nbActi ...
I am facing an issue with the following code snippet: const productsWithAddonPrice = useMemo(() => { const addonsPrice = addonsSelected .map(id => { if (addons === undefined) { return 0} return addons.find(addon => addo ...
Here is an example of the code I'm working with: ngOnInit{ let p1 : Person = {}; console.log(p1); //Object { } this.setNull<Person>(p1); console.log(p1); //Object { } } private setNull<T>(obj : T){ obj = null; } My objective is to ...
In my project, I rely on markdown for text editing. The markdown is converted to HTML and then stored in the database for display in the view. When users want to edit a post, the stored text is retrieved from the database and used as the initial value in ...
I have implemented a modal in the root component that can be triggered from anywhere. However, I am facing a dilemma on how the bottom component can communicate with the top component without excessive use of callback functions. Root Component <contai ...
Exploring the functionality of the swagger plugin provided by nestjs, I am eager to try it out. While it works smoothly when defining a class like CreateUserDto, my goal is to incorporate types from a third-party library - specifically @adyen/api-library. ...
Within my application, I have set up an auto-redirect from the root directory '/' to '/PageOne' with the following code: const Home = () => { const router = useRouter(); useEffect(() => { router.push('/pageone', ...
I'm attempting to modify the type of query in Express.js Request namespace. I have already tried using a custom attribute, but it seems that this approach does not work if the attribute is already declared in @types (it only works for new attributes a ...
On the backend, I have set up a Java server and linked it to my ionic 5 project if(origin.contains("ionic")) { httpresponse.setHeader("Access-Control-Allow-Origin", "ionic://localhost"); } else { httpre ...
I'm currently working on a proof of concept for a basic monorepo application. To structure my packages, I've decided to use Yarn Workspaces instead of Lerna as it seems more suitable for my needs. One of the packages in my setup is shared, which ...
I'm a beginner in NestJs, Graphql, and typescript. I am trying to make an external API call that is essentially a Graphql query itself. The goal is to modify the response, if necessary, and then return it for the original request or query, in this ca ...
I recently came across some code that I inherited which appears like this: String.fromCharCode.apply(null, new Uint8Array(license)); Recently, we updated our project dependencies to TypeScript 3, which raised an error stating: Argument of type 'Ui ...