After carefully analyzing your needs, I have developed a suitable solution for you.
From what I gather, you have user controls (as depicted in the image below) generated using the code snippet provided here:
<th *ngFor="let column of Filter" >
<tr>{{ column.name }}:
<input type="{{column.type}}" id="{{ column.key }}"
name="{{ column.key }}" autocomplete="off"
[(ngModel)]="column.value" > </tr>
</th>
<hr>
<button class="btn btn-success" type="submit" (click)="fFilter()">Search</button>
https://i.sstatic.net/3yo4J.png
https://i.sstatic.net/MjMLU.png
Once data is entered into all textboxes, when the user clicks "Search," you wish to display the output or data as shown in the alert message in the image below within the function call.
https://i.sstatic.net/YjSNJ.png
I have included [(ngModel)]="column.value" for two-way binding of each textbox's data. This allows us to retrieve this data in the .ts file.
Column.model.ts:
export class Column{
public key:string;
public type:string;
public name:string;
public value:string;
constructor(key:string,type:string,name:string,value:string)
{
this.key=key;
this.type=type;
this.name=name;
this.value=value;
}
}
component.ts file:
import { Component, OnInit } from '@angular/core';
import { Column } from './Column';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
column: Column;
Filter: Column[]=[new Column("1","ABC","Column1",""),
new Column("2","ABC","Column2",""),
new Column("3","ABC","Column3",""),
new Column("4","ABC","Column4","")];
constructor() {
// this.Filter=new Column(id="",type="",name="")
}
ngOnInit() {
}
fFilter(){
var requiredValue="";
this.Filter.map(
x=>requiredValue+=(x.key+"="+x.value+",")
);
alert(requiredValue);
}
}
In essence, I have altered how arguments are passed from the HTML file to the typescript file. However, the data retrieved in the fFilter() function remains consistent and can be utilized based on your specific requirements.