Reusable angular component has same data as previous one - input datalist

Question

I am trying to make a simple reuable component - an input box with data list that shows as dropdown. Everything is fine except when I try to reuse this component, then all the lists contain data same as the first component on the webpage. The component is called "app-reuable-filter" and here is how it is invoked:

    <app-reuable-filter 
        [params]="{filterName: 'tktNum', filterLabel: 'Ticket Number...'}"
        (filterChosen)="onFilterChosen($event, 'tktNum')"
    ></app-reuable-filter>
    <app-reuable-filter 
        [params]="{filterName: 'assigned', filterLabel: 'Assigned To...'}"
        (filterChosen)="onFilterChosen($event, 'assigned')"
    ></app-reuable-filter>

Component HTML

<div class="col">
    <input 
        type="text" class="form-control" list="dl1" (click)="clearFilter()" (change)="fireEvent()"
        [placeholder]="params.filterLabel" [(ngModel)]="chosenValue"
    >
    <datalist id="dl1"> 
        <option *ngFor="let _ of listOfVals">{{ _.valueField }}</option>
    </datalist>
</div>

Typescript

import { Component, EventEmitter, OnInit, Output, Input } from '@angular/core';

@Component({
  selector: 'app-reuable-filter',
  templateUrl: './reuable-filter.component.html',
  styleUrls: ['./reuable-filter.component.css']
})
export class ReuableFilterComponent implements OnInit {
  listOfVals: {}[] = [];
  chosenValue: string;
  @Input() params: any;
  @Output('filterChosen') filterClicked = new EventEmitter<string>();
  
  constructor() { }

  ngOnInit(): void {
    this.fetchFilters();
  }

  fetchFilters(): void {
    if (this.params.filterName === "assigned") this.listOfVals.push({ valueField : 'a1'});
    else this.listOfVals.push({ valueField : 'b1'});
  }

  clearFilter(): void {
    this.chosenValue = '';
    this.fireEvent();
  }

  fireEvent(): void {
    this.filterClicked.emit(this.chosenValue);
  }
}

After this I expect to see two inputs with drop-down lists with placeholders in them as "Ticket Number..." and "Assigned..." respectively. And that's how it shows, but I also expect to see "b1" and "a1" as single items in the drop-down lists respectively. Which I don't; both the lists contain "b1" as the only selectable item.

If I try to reuse this component once more, then no matter what I provide in "fetchFilters()" method, I'll still see "b1" as the only item to choose in this new component as well. I know that the values being passed in "params" are reaching the "fetchFilters()" method, I verified with console.log.

I do not understand why this is happening and how do I ensure that lists are loaded with correct values that I provide? Do I have to separate "list" parameter of "input tag" for each component instead of hardcoding as "dl1"?

Answer 1

I found the problem, it was indeed the "list" parameter, which needs to be dynamic, otherwise it keeps pointing to the first list which gets created due to a hardcoded value "dl1". Below is the code to how I fixed it (Component HTML)...

<div class="col">
    <input 
        type="text" class="form-control" [attr.list]="params.filterName" (click)="clearFilter()" 
        (change)="fireEvent()" [placeholder]="params.filterLabel" [(ngModel)]="chosenValue"
    >
    <datalist [id]="params.filterName"> 
        <option *ngFor="let _ of listOfVals">{{ _.valueField }}</option>
    </datalist>
</div>