Using *ngIf with values from an array in *ngFor in Angular 2: How to make it work?

i just started learning angular 2 and ionic, so I'll keep it brief:

 <ion-card class="acc-page-card" *ngFor="let account of accounts">
   <ion-card-content>
    <!-- Add card content here! -->
    <ion-item (click)="GoTo('AccountPage')">
        <div class="acc-img" item-left>
            <img src="{{account.img}}" alt="">
        </div>
        <div class="acc-details">
            <span class="name">{{account.title}}</span>
            <span class="title">{{account.link}}</span>
        </div>
        <div class="acc-icons" item-right>
            <i *ngIf="valueFromArray" class="icomoon-Add-user-icon"></i>
            <i *ngIf="valueFromArray" class="icomoon-Favorites-icon"></i>
        </div>
    </ion-item>
  </ion-card-content>

</ion-card>

where 'valueFromArray' represents the value I want to extract from the array I am iterating through. I attempted:

<i *ngIf="{{account.isFriend}}" class="icomoon-Add-user-icon active-icon"></i>

and it was completely incorrect. How can I properly utilize a value from the array I am looping through in a scenario like this? Apologies for my poor English.

angulartypescriptionic2

Answer №1

To access it, simply treat it like any other variable:

<i *ngIf="account.isFriend" class="icomoon-Add-user-icon active-icon"></i>

Additionally, a few lines above, the img tag should be:

        <img [src]="account.img" alt="">

Avoid using interpolation {{...}} within attributes; save that for the content text. Instead, use input property binding [attribute]=value for attribute values such as src.

Answer №2

attempt using *ngIf="account.isFriend"

<i *ngIf="account.isFriend" class="icomoon-Add-user-icon activated-icon"></i>

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

Error message displaying that the argument for the onChange state in a jhipster react form is not assignable as type '{ [x: number]: any; }'

Just diving into the world of React and encountering a bit of a struggle with jsx when it comes to setting state in a form that contains two fields and triggers an ajax call to store a json object (response data) in the state's field3. The code I curr ...

javascriptreactjstypescriptreduxjhipster

Is NATS.io compatible with React Native?

Struggling with integrating nats.io into a React Native project using Typescript has presented many challenges. Is there a way to successfully incorporate it without having to modify node_modules of nats (such as changing the "fs" import to "react-native-f ...

reactjstypescriptnativenats.io

Is it possible to use TypeScript in a React Native project with a JavaScript file?

Currently, I am learning React Native by working on app clones like Instagram and YouTube. I have recently started an AirBnb clone project, but I'm facing some issues with the initial build. One issue I noticed is that in 'App.js', the temp ...

javascripttypescript

Adding Components Dynamically to Angular Parent Dashboard: A Step-by-Step Guide

I have a dynamic dashboard of cards that I created using the ng generate @angular/material:material-dashboard command. The cards in the dashboard are structured like this: <div class="grid-container"> <h1 class="mat-h1">Dashboard</h1> ...

htmlangulartypescript

Guide on creating a static method to generate a subclass instance

I am currently working on creating an abstract class called Enum, which consists of static methods that return instances of the class they are invoked upon. However, I am encountering difficulties in properly typing these methods. My goal is to help TypeS ...

typescriptabstract-classsubclassstatic-methods

Overtaking a property in a node_module interface: a guide

I am facing a situation where I need to modify an existing interface property in my custom type declaration file, rather than creating a new one. Despite trying various approaches, such as attempting to omit the property, I have not been successful in ach ...

javascriptnode.jstypescript

Tips for iterating through nested objects with a for loop

Struggling with validations in an Angular 5 application? If you have a form with name, email, gender, and address grouped under city, state, country using FormGroupname, you might find this code snippet helpful: export class RegistrationComponent implemen ...

javascriptangularloopstypescript

Typing Redux Thunk with middleware in TypeScript: A comprehensive guide

I recently integrated Redux into my SPFx webpart (using TypeScript), and everything seems to be working fine. However, I'm struggling with typing the thunk functions and could use some guidance on how to properly type them. Here's an example of ...

typescriptredux

Implementing lazy loading in a different ng-module: Step-by-step guide

I currently have two ng-modules set up Dash Board Repeat order list I loaded the Repeat order module through lazy loading. Now I am trying to integrate the Repeat order module inside the dashboard as HTML content <app-repeatorderlist></app-re ...

angularlazy-loadingangular2-modules

"Integrating PrimeNG with Angular in aspnetcore-spa template: A step-by-step guide

It feels like I spend more time setting up Angular than actually developing with it. There has to be a simpler way... :( Currently, I'm using the aspnetcore-spa template and creating projects with "dotnet new angular" version 1.0.3, which includes An ...

asp.netangularprimeng

Tips for adding an item to an array within a Map using functional programming in TypeScript/JavaScript

As I embark on my transition from object-oriented programming to functional programming in TypeScript, I am encountering challenges. I am trying to convert imperative TypeScript code into a more functional style, but I'm struggling with the following ...

javascripttypescriptfunctional-programming

Launching npm using the command "npm run protractor" results in console errors being thrown upon completing the test

Recently, we made the decision to streamline the installation process of Protractor on local machines by specifying it in package.json rather than installing it individually with the -g flag. The addition we made looks something like this: "scripts": { ...

javascriptnode.jsangularprotractore2e-testing

"Resulting in 'undefined' due to an asynchronous function call

Encountering an issue with async method implementation. In my authServices, there is a loginWithCredential function which is asynchronous: async loginWithCredential(username, password){ var data = {username: username, password: password}; api.pos ...

typescriptreact-nativepromiseecmascript-6

React: Resolving the issue of "children" property not found in type "IntrinsicAttributes & Props"

Currently, I am attempting to retrieve data from an API and showcase it in a list of cards using React with TypeScript. As I am relatively new to working with React in Typescript, I am uncertain about how to resolve this error or if I have overlooked somet ...

reactjstypescript

Angular 2 mistakenly utilizing incorrect RouterOutlet

I'm facing an issue with implementing md-tabs along with the router-outlet to avoid preloading all data at once. My goal is to load data only when needed. AdminComponent.html <a [routerLink]="['categories']"><h1>to categories&l ...

angularangular2-routing

Encountering an issue in Angular where data.slice is not functioning properly, resorting to using parseInt to convert strings into Date

Looking to convert the data retrieved from the database into numbers and dates with ease. One set of data is in milliseconds while the other is in timestamps. https://i.stack.imgur.com/HdM0D.png The goal is to transform both types into numbers first, the ...

angulartypescriptstringparseint

Ways to resolve the error message "TypeError: 'setOption' is not a function on type 'MutableRefObject' in React"

CODE export default function EChart({ option, config, resize }) { let chart = useRef(null) let [chartEl, setChartEl] = useState(chart) useEffect(() => { if (resize) { chartEl.resize() } if (!chartEl.cu ...

javascriptreactjstypescriptnext.jsecharts

angular Issue with setTimeOut() function malfunctioning

I have a div with the class alert. <div class="alert" *ngIf=alert> <h1>Copied</h1> </div> I am trying to display this div for 3 seconds. Initially, it will be hidden and after clicking a button, I run a function that cha ...

angular

One method of extracting an object from an array using a parameter function is by utilizing the following approach

I am searching for a specific object in an array based on the user-provided ID. var laptops = [{ "name": "Firefox", "age": 30, "id": "ab" }, { "name": "Google", "age": 35, "id": "cd", "date": "00.02.1990" }, { "na ...

javascriptangulartypescript

Tips for positioning a div alongside its parent div

I have a unique setup with two nested divs that are both draggable. When I move the parent div (moveablecontainer), the child div (box.opened) follows smoothly as programmed. Everything works well in this scenario. However, when I resize the browser windo ...

htmlcsstypescriptangular6