Examining the reasoning behind comparisons within an Ionic view

When looping through the results in an ion-list, I compare the values dynamically by using Angular's ngIf directive.

<ion-list>
// Loop the results 
<ion-item *ngFor="let protocole of protocoles">

    <ng-template [ngIf]="{{value}} == {{other_value}}">
    <div>
        <ion-label>
            <h2>{{ protocole.item}} {{ modal_data_prot_detail_code }}</h2>
        </ion-label> 
    </div>

    // ELSE
    </ng-template>
        <ion-label><h2>{{ protocole.item}}</h2> </ion-label>
    </ion-list>

Answer №1

It appears that you are attempting to use an "if .. else" structure here. Let's correct that and provide an example of how you can do it:

<div *ngIf="protocole.item === other_value; else other">
   <ion-label>
      <h2>{{ protocole.item}} {{ modal_data_prot_detail_code }}</h2>
   </ion-label> 
</div>

<ng-template #other>
   <ion-label">
     <h2>{{ protocole.item}}}</h2> 
   </ion-label>
</ng-template>

Answer №2

Give this a shot:

<ion-list>
        <ion-item *ngFor="let protocol of protocols">
            <ng-container 
                 [ngTemplateOutlet]="value == other_value" ? firstTemplate: secondTemplate" 
                 [ngTemplateOutletContext]="{protocol:protocol}">
            </ng-container>
        </ion-item>
    </ion-list>

    <ng-template #firstTemplate let-protocol='protocol'>
        <div>
            <ion-label>
                <h2>{{ protocol.item}} {{ modal_data_prot_detail_code }}</h2>
            </ion-label> 
        </div>
    </ng-template>

    <ng-template #secondTemplate let-protocol='protocol'>
        <ion-label"><h2>{{ protocol.item}}}</h2> </ion-label>
    </ng-template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access my web application to easily download Jira tickets in XML format with just a single click

In order to retrieve all tickets from Jira within a specific time period, I currently have to manually extract them by clicking on the extract button in XML format. Subsequently, I download this XML file onto my web application and save it into the databa ...

What is the best way to prevent or highlight a particular row in a table depending on the line number values using Angular 2 and NgFor?

My work involves using angular2 and dealing with a table of games. I have a list of games in the database that have been clicked on before (each game can be clicked once). I want to add a class (whether it's a block or painted it doesn't matter) ...

Enhance the functionality of Immutable.js field by integrating a custom interface in Typescript

Imagine a scenario where the property name is field, essentially an immutable object. This means that methods like field.get('') and other immutable operations are available for use. Nevertheless, I have my own interface for this field which may ...

Is it possible to postpone the initiation of an Angular application until a promise is fulfilled

At the moment, my code looks like this: new Loader().load().then(() => { platformBrowserDynamic().bootstrapModule(AppModule); }); The issue lies in the fact that I only need to delay the execution of ngOnInit and any route resolving until a prom ...

The Ionic application is experiencing difficulties in loading the JSON file

I am currently delving into the world of Ionic development and utilizing localhost to test my app. My goal is to create a contacts list application where contact details such as name, email, phone number, and avatar are loaded from a JSON file. However, I& ...

What is the best way to organize a collection of objects by a specific characteristic in Typescript?

Imagine you have an array of objects with the following structure: type Obj = { id: number, created: Date, title: string } How can you effectively sort this array based on a specific property without encountering any issues in the type system? For ...

Issue with TypeScript Decorators: Setter function is not being invoked for an object's property

I am working on incorporating TypeScript Decorators in an Angular application to store data in local storage. This is my current goal: export function Storage() { return function (target, key): any { // property value let _val = target ...

Retrieve a HashMap through an HTTP GET request using Angular 10

I am currently using the following versions: Angular CLI: 10.0.1 Node: 12.18.2 OS: win32 x64 Angular: 10.0.2 In my setup, I have a Java Spring Boot service that is functioning correctly and returns data as a HashMap. Map<String, List<String>&g ...

Ensuring Angular2 Javascript is validating only numerical input and not accepting characters

Access the full project here (excluding nodes_modules): Note: After running the project, all actions related to this issue can be found in the "Edit All" section of the website. Click on that to view the table. The main objective of this website section ...

The functionality of Angular 4 routing breaks down when attempting to access a direct URL path

Currently, I am working on an Angular 4 application that has numerous routes. The issue I am encountering is fairly straightforward to comprehend. All routing functions as expected within the app; however, a problem arises when accessing a specific URL dir ...

Guide to incorporating a pluck feature into TypeScript code

One task I face frequently is extracting specific properties from an object const obj = {a:1, b: 2, c: 3}; const plucked = pluck(obj, 'a', 'b'); // {a: 1, b:2} Unfortunately, achieving this task with type safety in TypeScript can be c ...

Anticipated the object to be a type of ScalarObservable, yet it turned out to be an

When working on my Angular project, I utilized Observables in a specific manner: getItem(id): Observable<Object> { return this.myApi.myMethod(...); // returns an Observable } Later, during unit testing, I successfully tested it like so: it(&apos ...

The module named "domhandler" does not have an exported member called 'DomElement'. Perhaps you meant to use 'import DomElement from "domhandler"' instead?

I am currently working on a react-typescript project and encountered an error while trying to build it. It seems that I forgot to install dom utils and HTML parser libraries, and now I am facing the following issue when I attempt to run yarn build: ...

Having difficulty altering the color of an element in Viewer

Currently, I am conducting a PoC and experimenting with changing the color of a selected element to red. Despite creating a class as shown below, I am facing issues where the elements do not change color when selected. I have attempted various examples fro ...

What steps can I take to ensure that the upper and left sections of a modal dialog remain accessible even when the size is reduced to the point of overflow?

One issue I'm facing is with a fixed-size modal dialog where part of the content gets cut off and becomes inaccessible when the window shrinks to cause an overflow. More specifically, when the window is narrowed horizontally, the left side is cut off ...

AWS CodePipeline encounters a failure with the error message: "Debug Failure. A non-string value has been passed to `ts.resolveTypeReferenceDirective`."

Everything was running smoothly, but suddenly after pushing some changes, my pipeline started failing consistently. The code works fine on my local machine, so I'm not sure what triggered this sudden issue. Here's the error message from the faile ...

Resolving CORS Origin Error in Angular: A Step-by-Step Guide

I am encountering an issue with my angular app. Whenever I try to use the POST, PUT, and DELETE methods, I receive the following error message: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://dev-*** ...

Circular dependency in Typescript/Javascript: Attempting to extend a class with an undefined value will result in an error,

Query Greetings, encountering an issue with the code snippet below: TypeError: Super constructor null of SecondChild is not a constructor at new SecondChild (<anonymous>:8:19) at <anonymous>:49:13 at dn (<anonymous>:16:5449) ...

Implementing try-catch logic for element visibility in Playwright using TypeScript poses limitations

There is a specific scenario I need to automate where if the title of a page is "Sample title", then I must mark the test as successful. Otherwise, if that condition is not met, I have to interact with another element on the page and verify if the title ch ...

When making a request from an Ionic client, Flask and Flask-SocketIO return a 404 error for the specified route

I am currently developing a real-time chatting and photo sharing application. For the server side, I am utilizing Flask to create RESTful web services, while for the client side on mobile, I am using the Ionic framework (AngularJS). One of the web service ...