How can I ensure that only the input field in which a user is typing gets populated, rather than all the input fields below it?
<ng-container matColumnDef="branch_code">
<mat-header-cell *matHeaderCellDef mat-sort-header>Enter Branch Code</mat-header-cell>
<mat-cell *matCellDef="let row">
<input matInput placeholder="Enter Branch Code" [(ngModel)]="branchCode">
<mat-icon (click)="gotoWorkstationDetails()" >arrow_forward</mat-icon>
</mat-cell>
</ng-container>
I have successfully retrieved the input value in my ts file.
Please refer to the screenshot for reference. The issue is that all input fields are getting populated with '213', whereas only the active input field should display the value entered by the user. https://i.sstatic.net/JH6pw.png
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { MatPaginator, MatTableDataSource, MatSort } from '@angular/material';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';
@Component({
selector: 'app-workstation',
templateUrl: './workstation.component.html',
styleUrls: ['./workstation.component.scss']
})
export class WorkstationComponent implements OnInit {
title = 'Workstation';
displayedColumns = ['name', 'mac_address', 'address', 'branch_code'];
dataSource = new MatTableDataSource();
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
loading = false;
branchCode;
constructor( private http: HttpClient, public router: Router ) { }
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.loading = true;
this.http.get<Array<any>>('/api/workstations').subscribe(data => {
this.dataSource.data = data;
this.loading = false;
},
err => {
this.loading = false;
});
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
}
gotoWorkstationDetails() {
console.log(this.branchCode);
this.loading = true;
this.http.get<Array<any>>(`/api/branches/${this.branchCode}/workstations`).subscribe(data => {
const branchDetail = data;
this.router.navigate(['workstation/' + this.branchCode]);
console.log(branchDetail);
this.loading = false;
},
err => {
this.loading = false;
});
}
}