Show an input field upon button click within a ngFor loop by utilizing *ngIf in Angular/TypeScript

I'm facing an issue with understanding how to utilize *ngIf in a *ngFor loop.

Here's my code:

<div *ngFor="let movie of movieList" class="movieRow">
<button (click)="onEdit()">click</button>
<div *ngIf="isEditEnable">
  <input />
</div>

And here's the TypeScript part:

    isEditEnable: boolean = false;
    onEdit() {
    this.isEditEnable = !this.isEditEnable;
    }

Upon running this, the boolean value changes globally for all movies in movieList, causing the input box to appear for all movies. I aim to display it only for the clicked movie.

Should I implement events for this? If so, how should I proceed?

Your guidance is much appreciated.

Answer №1

Using a single property called isEditEnable for all movies is causing issues. When you click on the button for any movie, it toggles and displays the input field for every movie.

To resolve this, create a similar property for each individual movie item. Update your *ngIf statement to look like this:

*ngIf="movie.isEditEnable"

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

Using Angular 6 to pass basic authentication in httpClient's httpOptions

I am currently working on an Angular 6 service where I am attempting to modify a record, but the system is indicating that I do not have authorization. At this moment, my code looks like this: const httpOptions = { headers: new HttpHeaders({'Conte ...

When changing the dropdown option on a separate page in React/Next JS, all checkboxes show the clicked style as a result of utilizing useState

I have implemented checkboxes for three different categories: "Types", "Price", and "Categories". They function correctly, with data being passed to a separate checkbox component without any issues. The problem arises when I click a checkbox and then inte ...

The 'checked' property cannot be bound to 'mat-button-toggle' as it is not recognized as a valid property in Angular 9

I am encountering an issue with my Angular 9 application. I have integrated angular-material and imported the MatCheckboxModule correctly in the module. Here is the version of the material package I am using: "@angular/material": "^10.2.0&q ...

What is the best way to set up a sidenav with router-outlet and a distinct login page with router-outlet?

My goal is to create an application with a login page that, once the user logs in, displays a navbar, toolbar, and sidenav with a router-outlet. In my app.component.html, I have set it up like this: <div *ngIf="isAuthenticated"> <app- ...

Resolving the problem of <Link> error in React with Typescript using react-router-dom

Currently, I am facing an issue with the 'react-router-dom' library. This is my first experience using React with Typescript; Everything was functioning properly until I introduced the from 'react-router-dom', which caused the entire ...

What is the best way to transform my tuple so that it can be properly formatted for JSON in Python?

I have a Python code snippet that looks like this: @app.route('/getData', methods = ['GET']) def get_Data(): c.execute("SELECT abstract,category,date,url from Data") data = c.fetchall() resp = jsonify(data) resp.st ...

"Angular Google Maps module working perfectly on local environment but failing to render on live production site

My little application utilizes the official Angular Google Maps module. While it runs smoothly in my local setup, it simply displays a gray window in production. Upon inspecting the code, I can see that the map, marker, and info window are present, but not ...

Displaying a collection of nested objects in AngularRendering a group

Is there a way to render an object of objects in Angular without converting it into an array or similar structure? I have a large object of objects and I want to avoid multiple iterations through object-to-array conversions just to loop through the array i ...

Struggling to configure Sass with @snowpack/app-template-react-typescript

I'm struggling to integrate Sass with the @snowpack/app-template-react-typescript template. I attempted to follow the steps outlined in this guide, but so far I haven't been successful. I even created a new project and tried adding it, but not ...

The argument type provided for returning an object in Rxjs switchmap is not valid

I have created a service in Angular that fetches data from different services and combines it with the initial service's data. If the initial service returns empty data, there is no need to call the second service. Here is the code: searchData(): Obs ...

What is the best way to update the button color in Angular's latest MDC (16+) version?

After transitioning to MDC-based Angular Material Components, I encountered an issue where the classes in my Angular components were no longer able to override the color of a material button. If you'd like to see a live example of this problem, click ...

How does the highlighting feature in Fuse.js includeMatches function operate?

Currently, in my Next JS/Typescript web application, I am using the Fuse.js library. However, I am still uncertain about how the includeMatches option functions for highlighting purposes. Whenever I enable this option, I receive a matches object within the ...

Using multiple flatMap responses within the map operator across various functions: a guide

I've been working on a solution to connect multiple operations within a map function that follows the flatMap operator. Here's how it currently functions: flatMap( someResponse => combineLatest([ this.locator.function(someResponse, var ...

Incorporating numerous query parameters in Angular version 14

I am currently working on developing a multi-item filter feature for my application and I am faced with the challenge of sending multiple query parameters in the API request to retrieve filtered items. My main concern is whether there is a more efficient ...

Show images from an array of base64 image data

I am currently facing an issue while trying to display images in base64 format within a RadListView component. Within the loop of the component, I have the following code snippet: let base64ImageSource = new ImageSource; base64ImageSource = fromBase64(re ...

Typescript causing issues with Material-UI theme.mixins.toolbar functionality

Currently, I am utilizing Material-UI to develop a React and Typescript website. The experience has been positive overall, but I am facing a specific issue. I have been trying to implement one of the code examples from their documentation, but unfortunatel ...

Introducing the Eventbridge Pipeline enhancer: a tool that assigns a personalized MessageGroupID to each message without

My setup involves an SQS queue that is connected to a FIFO queue through an eventbridge pipe. The pipe extracts a value from the payload and assigns it to the MessageGroupID using a JSONpath expression. import { SqsTarget } from '@aws-cdk/aws-pipes-ta ...

Customizing the Style of Mat-Form-Field

I have designed a search bar using mat-form-field and attempted to personalize the appearance. Currently, there is a gray border-like region surrounding the input field and icons. Moreover, clicking on the input field results in a visible border: <form ...

Angular Application cannot locate the interface file

Attempting to create a basic test environment for the OMBD Api. Utilizing an interface file named ombdresponse.ts: interface IOMBDResponse { Title: string; Year: string; Director: string; Poster: string; } The issue arises within the ombd- ...

Having trouble triggering a click event with React testing library?

I am working with a <Select/> component as shown in the image below. https://i.sstatic.net/ko8Y0.png App.tsx import React, { useState, ChangeEvent } from "react"; import MySelect from "./MySelect"; export default function App ...