Clicking on the element will toggle the class, adding it if it's

Question

Clicking on the element will toggle the class, adding it if it's

When I click on an item, I want to add a class name. If I click on the same item again, I want to remove the class for ngFor loop.

<ion-item *ngFor="let x of statementresponse; let i=index" class="cust_delay delay" [ngClass]="{'active': selectedItem == x}" (click)="listClick($event, x)" >
</ion-item>

selectedItem: any;
listClick(event, newValue) {
    console.log(newValue);
    this.selectedItem = !newValue;
}

angular typescript ionic-framework

Answer 1

Answer №1

To achieve this functionality, consider incorporating an "active" property into your item objects:

items = [
  {name:'one', active:false},
  {name:'two', active:false},
  {name:'three', active:false},
];

In your template, display the items like so:

<li *ngFor="let item of items" 
    (click)="toggleClass(item)" 
    [ngClass]="{'active': item.active}">{{ item.name }}</li>

The toggleClass() function can be used to toggle the active state of the clicked item:

toggleClass(item){
  item.active = !item.active;
}

Example

Answer 2

To achieve this functionality, consider incorporating an "active" property into your item objects:

items = [
  {name:'one', active:false},
  {name:'two', active:false},
  {name:'three', active:false},
];

In your template, display the items like so:

<li *ngFor="let item of items" 
    (click)="toggleClass(item)" 
    [ngClass]="{'active': item.active}">{{ item.name }}</li>

The toggleClass() function can be used to toggle the active state of the clicked item:

toggleClass(item){
  item.active = !item.active;
}

Example

Answer 3

Answer №2

Give this a go:

HTML Snippet

<ion-item *ngFor="let x of statementresponse;let i=index" 
     class="cust_delay delay"[class.active]="selectedItem == i" 
     (click)="selectedItem=i" >
      {{x}}
</ion-item>

Typescript Code:

selectItem=-1

Check out the StackBlitz demo here

Answer 4

Give this a go:

HTML Snippet

<ion-item *ngFor="let x of statementresponse;let i=index" 
     class="cust_delay delay"[class.active]="selectedItem == i" 
     (click)="selectedItem=i" >
      {{x}}
</ion-item>

Typescript Code:

selectItem=-1

Check out the StackBlitz demo here

Answer 5

Answer №3

To keep track of the value, you can save a boolean in the object itself. Then, use the code snippet below:

<ion-item [class.active]="item.active"></ion-item>

item.active represents the boolean value

When clicked, toggle the boolean value like this:

item["active"] = !item["active"]

Answer 6

To keep track of the value, you can save a boolean in the object itself. Then, use the code snippet below:

<ion-item [class.active]="item.active"></ion-item>

item.active represents the boolean value

When clicked, toggle the boolean value like this:

item["active"] = !item["active"]

Clicking on the element will toggle the class, adding it if it's

Answer №1

Example

Answer №2

Answer №3

Similar questions

No declaration file was located for the module '@handsontable/react' despite the presence of a 'd.ts' file

Expanding MaterialUi styled components by incorporating TableCellProps: A guide

Maintain division contents while navigating

What is the best way to transform a JavaScript object into a chain of interconnected links?

Creating a function that allows for the dynamic addition of rows in Angular with

What is preventing the union distribution from occurring with T[number] when T is an ArrayLike?

Exploring ways to establish communication between parent and child components through click events

Using TypeScript with Redux for Form Validation in FieldArray

CSS: Ensuring consistent spacing between a custom popover and its control, regardless of container size modifications

Using Typescript to customize component props and theming through CSS Modules

When you utilize useSelector, the state may be returned as undefined even after it has been initialized

subscribing to multiple observables, such as an observable being nested within another observable related to HTTP requests

No errors encountered during compilation for undefined interface object types

Ways to filter and display multiple table data retrieved from an API based on checkbox selection in Angular 2 or JavaScript

Utilizing Carousel Functionality in Angular 4

Tips for validating a receipt in an In-App purchase within an Ionic1 or Ionic2 application on iOS

Angular CLI yields a unique arrangement of files

CRITICAL ALERT: Mark-compact operations inefficiently close to heap threshold resulting in allocation failure - JavaScript heap exhausts memory capacity #34576

How can I resolve the problem of transferring retrieved data to a POST form?

What could be causing the ERROR TypeError in an Angular form where "_co.service.formData" is undefined?