Identify duplicate value assignments for a property using ngOnChanges

Question

Identify duplicate value assignments for a property using ngOnChanges

Essentially, I am working with an array of objects and my goal is to pass the index of a selected object from the array to another component using @Input.

The issue arises when I try to select the same item twice because the ngOnChanges function does not recognize it as a change when the value remains the same (e.g., going from 1 to 1). As a result, I am unable to select the same object consecutively.

Child Component:

@Input('editAppointmentIndex') editAppointmentIndex: number;

ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
    if (changes.editAppointmentIndex && changes.editAppointmentIndex.currentValue != undefined) {
      // Perform actions on the selected object
    }
}

Parent Component:

<child-component [editAppointmentIndex]="currentAppointmentIndex"></child-component>

currentAppointmentIndex: number;

onEdit(i) {
    this.currentAppointmentIndex = i;
}

Sibling Component:

<button class="edit" (click)="onEdit(i)">Edit</button>

@Output() onEdit_: EventEmitter<number> = new EventEmitter<number>();

onEdit(i) {
    this.onEdit_.emit(i);
}

angular typescript

Answer 1

Answer №1

When the value remains unchanged, it does not trigger a new event, so OnChanges will not be activated.

I personally don't see it as too troublesome to include an object with the index to solve this issue. Here is my suggestion:

selectedItemIndex = {};

onSelect(i) {
  this.selectedItemIndex = { index: i };
}

Then you can access the index like this:

if (changes.selectedItemIndex.currentValue && changes.selectedItemIndex.currentValue.index != undefined) {
  console.log(this.selectedItemIndex.index)
}

DEMO: StackBlitz

Answer 2

When the value remains unchanged, it does not trigger a new event, so OnChanges will not be activated.

I personally don't see it as too troublesome to include an object with the index to solve this issue. Here is my suggestion:

selectedItemIndex = {};

onSelect(i) {
  this.selectedItemIndex = { index: i };
}

Then you can access the index like this:

if (changes.selectedItemIndex.currentValue && changes.selectedItemIndex.currentValue.index != undefined) {
  console.log(this.selectedItemIndex.index)
}

DEMO: StackBlitz

Answer 3

Answer №2

Another approach is to utilize the @Input decorator in combination with a setter method.

previousValue: number;
@Input()
set appointmentEditIndex(newValue: number) {
  if (newValue && newValue !== this.previousValue) {
    // Implement desired actions with the selected object
   }
   this.previousValue = newValue;
}

Answer 4

Another approach is to utilize the @Input decorator in combination with a setter method.

previousValue: number;
@Input()
set appointmentEditIndex(newValue: number) {
  if (newValue && newValue !== this.previousValue) {
    // Implement desired actions with the selected object
   }
   this.previousValue = newValue;
}

Identify duplicate value assignments for a property using ngOnChanges

Answer №1

Answer №2

Similar questions

Best approach for managing Angular dependencies: Is it acceptable to link to a TypeScript file other than its corresponding component.ts in a component.html file?

Connecting Angular modules via npm link is a great way to share common

How can you create a type in Typescript that is composed of a specific property taken from another type?

Angular Express Route Guide

Issue with Angular 2 (Ionic 2): Struggling to properly display Component within Page

Three.js and Angular - the requested function cannot be found

Press the key to navigate to a different page

A tutorial on ensuring Angular loads data prior to attempting to load a module

What is the best way to bundle my Language Server along with my client?

Is there a way to incorporate an external JavaScript file into a .ts file without the need for conversion?

What is the concept of NonNullable in typescript and how can it be understood

Implementing Service Communication

Using TypeScript, take advantage of optional chaining in conjunction with object destructuring

"Error: Retrieving the body data from the Express request

The Java value is not returned by the Observable<boolean> stream

What could be causing the issue with converting a Firestore timestamp to a Date object in my Angular app?

Retrieve the product IDs by selecting the checkboxes, then compile a fresh array consisting of the identified IDs

Use RxJS to ensure one observable waits for another observable to emit a non-null value

Using Typescript to deliver the parent component's props to its children prop

Navigating with Angular: Every time I refresh the page or enter a specific URL, Angular automatically redirects to the parent route