Delete a particular instance of a component from an array within the parent component when a button is clicked within the child component, depending on a specific condition in Angular

Question

Delete a particular instance of a component from an array within the parent component when a button is clicked within the child component, depending on a specific condition in Angular

One scenario I am facing involves the removal of a component instance from an array (located in the parent component) when a button is clicked inside the child component, based on a specific condition.

https://i.sstatic.net/YPFHx.png

Within the parent component, the 'Add BU' button is present, with three text fields below (named 'BU', 'G Value', and 'C Value') along with a close button, all of which are generated by the child component. Every time the 'Add BU' button is clicked, a new row from the child component is added to the UI. I have utilized the code below to push instances of the child component to an array in the parent component:

https://i.sstatic.net/kszYg.png

https://i.sstatic.net/glN0q.png

Now, I have two questions regarding the above setup: 1. How can I delete a specific child instance from the parent's array when the corresponding close button is clicked (which resides inside the child component)? 2. How can I retrieve the values entered in each text field (e.g. 'BU', 'G Value', and 'C Value') in each row upon clicking the 'Add' button?

Similar questions have been asked before, and I have implemented a strategy similar to the one provided in the accepted answer in this link: Add component to dom on click of button in angular2. My first question is also evident in the image below:

https://i.sstatic.net/TRhCG.png

javascript angular typescript parent-child

Answer 1

Answer №1

If you want to remove a child instance, you can use the following code:

<payment-option
    *ngFor="let bu of buList; index as i"
    (delete)="removeBU(i)>
</payment-option>

removeBU(i: number) {
  this.buList.splice(i, 1);
}

For retrieving data on add, you can use this code snippet:

@ViewChildren(PaymentOptionComponent) paymentOptionComps!: QueryList<PaymentOptionComponent>;

add() {
  const data = {};
  this.paymentOptionComps.forEach(comp => {
    // Get data from comp and add it to data here.
  });
}

Answer 2

If you want to remove a child instance, you can use the following code:

<payment-option
    *ngFor="let bu of buList; index as i"
    (delete)="removeBU(i)>
</payment-option>

removeBU(i: number) {
  this.buList.splice(i, 1);
}

For retrieving data on add, you can use this code snippet:

@ViewChildren(PaymentOptionComponent) paymentOptionComps!: QueryList<PaymentOptionComponent>;

add() {
  const data = {};
  this.paymentOptionComps.forEach(comp => {
    // Get data from comp and add it to data here.
  });
}

Delete a particular instance of a component from an array within the parent component when a button is clicked within the child component, depending on a specific condition in Angular

Answer №1

Similar questions

ng-bind-html is having trouble parsing the HTML correctly and binding it

Unable to utilize the concatMap() method in conjunction with the angular2 Http feature

How to assign multiple values within nested for loops in Angular 6

Display the designated element upon clicking the designated link exclusively

Instructions for obtaining the most recent event using the `fromEvent` function

Utilizing Angular to bind properties conditionally

Which is the preferred choice for retrieving data using ngrx: Resolver or Guard?

Challenges with rendering text in Three.js

The connection status of socket.io is always inactive

ng-table Filtering with dropdown selection

Tips for preserving data while attempting to access the schema

I am perplexed as to why my useEffect function is executing twice within my NextJs client

Can you explain the significance of the syntax "require: ^"?

Fetching data from one component to load an Angular component

The value within the style.setProperty function does not get applied

Tips for resizing an image to perfectly fit on a compact HTML5 canvas without sacrificing its quality

Unslider: Ensure images stay centered even on smaller screen resolutions

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

Issue with Jade not displaying external JSON data

The errors in React-hook-form do not refresh or update as expected