Remove an item stored in an array based on a select

Question

I'm trying to remove an item stored inside an array base on the selected option, to understand better read this code:

component.html

<fnd-extended-select label="Tipo Prodotto:" [(ngModel)]="landingType" name="tipoprodotto">
    <fnd-option *ngFor="let p of agreementfilter?.landingPageTypes" [value]="p.id">{{p.description}}</fnd-option>
</fnd-extended-select>

Component.ts

  deleteMsg() {
    this.agreementfilter.landingPageTypes.splice(1, 1);
  }

Basically with this code when i press the button to delete the item only the FIRST object of the array is deleted.

What I need: Delete the item that ive selected from the array.

What kind of options do I have to solve the issue?

Thank you for your help!

Answer 1

The right solution was provided by @Nenad Radak in the comments of his answer.

Ive stored the value in my component and then called it again on the event of the button.

code:

temporary:string;

<fnd-extended-select label="Tipo Prodotto:" [(ngModel)]="landingType" name="tipoprodotto">
  <fnd-option *ngFor="let p of agreementfilter?.landingPageTypes; let i = index" (click)="tempor(i)" [value]="p.id">{{p.description}}</fnd-option>
</fnd-extended-select>


 tempor(index){debugger;
   this.temporary= index
 }
  deleteMsg() {

    this.agreementfilter.landingPageTypes.splice(this.temporary, 1);
 }