0

I have a case where I want to remove an instance of a component from an array (in parent component) on a button click from inside child component based on some condition.

enter image description here

In the image, 'Add BU' button is in parent component and the three text fields below (namely 'BU', 'G Value' and 'C Value') and one cross button are coming from child component. On each 'Add BU' button click a new row from child component is created in UI. I used the following code to push instances of child to an array in parent :-

enter image description here

enter image description here

Now I have question regarding 2 points here :- 1. How may I delete the same specific child instance from the array in parent, on the same instance cross button click (cross button is inside child) ? 2. How may I send the values added in each text field in each row (i.e. 'BU', 'G Value' and 'C Value') on 'Add' button click ?

Some similar question has already been asked in here and I have used similar approach given in the accepted answer : Add component to dom on click of button in angular2. And my first question is also being asked as the last comment in image below :

enter image description here

Improve this question

1 Answer 1

Reset to default
1

To delete the child instance:

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

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

To get the data on add:

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

add() {
  const data = {};
  this.paymentOptionComps.forEach(comp => {
    // Get data from comp and add to data here.
  });
}
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

Thank you so much @Collierre for your response and yes it resolved my first issue. But second one still hangs in there. I don't know whether I am not understanding it well or what but I am still not able to access data from child to add. So on debugging your given code, when I hovered over 'comp' it still gives instance information of 'PaymentOptionComponent' but not the actual values of the fields 'BU', 'G Value' and 'C Value'. Kindly help. Thanks in advance.
I got following as response : I got following as response : > deleteRow: EventEmitter _isScalar: false observers: [Subscriber] closed: false isStopped: false hasError: false thrownError: null isAsync: false __proto: Subject selectedPaymentOption: "G/L_CC" buttonClicked: true proto: Object -------------> Now how can I extract my required information from this is the question.
Are you able to do something like comp.bu, comp.gVal, comp.cVal etc.? I can't be more specific with my suggestions without seeing the code for PaymentOptionComponent.
No I am not able to get. Probably I am missing something from my side. Below is my code for the component 'PaymentOptionComponent' :
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'payment-option', templateUrl: './payment-option.component.html', styleUrls: ['./payment-option.component.css'] }) export class PaymentOptionComponent { constructor() { } @Input() public selectedPaymentOption: string; @Input() public buttonClicked: string; @Output() public deleteRow = new EventEmitter(); public buVal: string; public gVal: string; public cVal: string; public removeRow() { this.deleteRow.emit(); } }
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.