Angular Dynamically Change Component Array Based on Input from User

Question

I have a simple search feature here where users can search for courses. Users currently have the ability to add search terms e.g. data, probability which are added to a component property known as searchTerms.

I loop through searchTerms using *ngFor in the view and would like for the user to be able to remove each term by clicking on the ✖ next to the term. I've defined the removeTerm() method as such:

removeTerm(term: string){
      var index = this.searchTerms.indexOf('term');
      if (index !== -1) this.searchTerms.splice(index, 1);
      this.filterByTerms();
    }

How do I bind each unique query to its own card so that when removeTerm() is called, only that term is removed from the searchTerms array? I imagine ngModel is necessary to perform two way data-binding, maybe something like [(ngModel)]='term' (click)="removeTerm(term)"?

Thank you!

Answer 1

You can just pass the index of the card you want to remove like this (click)="removeTerm(term, index)"

And then in your controller

removeTerm(term: string){
  if (index !== -1) this.searchTerms.splice(index, 1);
  this.filterByTerms();
}