Let me explain the issue I'm facing with my ngFor loop and component deletion functionality. Here is how I generate the component using ngFor:
<app-body *ngFor='let card of cardElements; index as i' (deleteCardEmit)='cardDeletion()' [currentCard]='card'></app-body>
In my TypeScript file, the 'cardDeletion' function looks like this:
cardDeletion(){
this.cardElements.pop()
}
The goal is to delete only the specific component that triggers the 'deleteCardEmit' event. Here is the button in the child component responsible for triggering component deletion:
<button (click)='deleteCard()'> Delete job </button>
This is the @Output emitter setup:
@Output() deleteCardEmit = new EventEmitter;
And here is the 'deleteCard' function implementation:
deleteCard(){
this.deleteCardEmit.emit();
}
I initially tried passing the index from ngFor into the pop method as shown below but it didn't work:
this.cardElements.pop(i)
If you have any suggestions or solutions, please share them as I am relatively new to web development. Your help would be greatly appreciated!