Add search button in Angular Spring Boot Application

Question

I have the following HTML file to show some values:

<h1 mat-dialog-title color="primary">
    License Details
</h1>
<mat-dialog-content >
        <div style="width:100%;display: flex;flex-direction: column;">
            
        </div>
</mat-dialog-content>
<mat-dialog-content>
<div class="example-container mat-elevation-z8">

    <table mat-table [dataSource]="customerList" class="a">

        <ng-container matColumnDef="Customer ID" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef class="customtd" style="font-size:15px;"><strong>Customer Id*</strong></th>
                <td mat-cell *matCellDef="let element" class="customtd"> {{element.customerId}} </td>
        </ng-container>

        <ng-container matColumnDef="Hardware Key" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef class="customtd" style="font-size:15px;"><strong>Hardware Key</strong></th>
                <td mat-cell *matCellDef="let element" class="customtd"> <textarea rows="2" cols="20" wrap="hard">{{element.hardwareKey}}</textarea> </td>
        </ng-container>

        <ng-container matColumnDef="Product" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef style="font-size:15px;" class="customtd"><strong>Product</strong></th>
                <td mat-cell *matCellDef="let element"> {{element.product}} </td>
        </ng-container>

        <ng-container matColumnDef="MSAN" margin-right:10px margin-left:10px> 
                <th mat-header-cell *matHeaderCellDef style="font-size:15px;" class="customtd"><strong>MSAN</strong></th>
                <td mat-cell *matCellDef="let element"> {{element.msan}} </td>
        </ng-container>

        <ng-container matColumnDef="CPE" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef style="font-size:15px;" class="customtd"><strong>CPE</strong></th>
                <td mat-cell *matCellDef="let element"> {{element.cpe}} </td>
        </ng-container>

        <ng-container matColumnDef="Service Connections" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef style="font-size:15px;" class="customtd"><strong>Service Connections</strong></th>
                <td mat-cell *matCellDef="let element"> {{element.serviceConnections}} </td>
        </ng-container>

        <ng-container matColumnDef="License Key" margin-right:10px margin-left:5px>
                <th mat-header-cell *matHeaderCellDef style="font-weight: bold;" style="font-size:15px;" class="customtd"><strong>License Key</strong></th>
                <td mat-cell *matCellDef="let element"> <textarea rows="2" cols="20" wrap="hard" [readonly]="!editable">{{element.licenseKey}} </textarea></td>
        </ng-container>

        <ng-container matColumnDef="Actions" margin-right:10px margin-left:10px>
                <th mat-header-cell *matHeaderCellDef style="font-weight: bold;" style="font-size:15px;" class="customtd"><strong>Actions</strong></th>
                 <td mat-cell *matCellDef="let element">
                   <button type="button" style="margin-left:5px" (click)="deleteLicense(element.id)">Delete</button>
                   <button type="button" style="margin-left:5px" (click)="openMxkLicenseDetailsDialog()">Update</button>
                   <button type="button" style="margin-left:5px" (click)="copyLicenseToClipboard(element.licenseKey)" class='btn btn-primary'>Copy License Key</button>
                 </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>
</mat-dialog-content>
<br>
<br>
<br>
<strong>* Customer ID might not be present for some products.</strong>
<mat-dialog-actions align="end">
    <button mat-button mat-raised-button mat-dialog-close cdkFocusInitial color="warn">Close</button>
</mat-dialog-actions>

This page looks like this:

I want to add a search button on top of this popup after the heading. I want to refine this list based on the Customer ID which is of type String. However, the primary key is ID of type long, not shown. ID is @GeneratedValue of property Auto at the backend. I tried the following code but could not implement it properly: https://stackblitz.com/edit/angular-search-filter?file=app%2Fapp.component.ts

The Component.ts file for this is:

@Component({
  selector: 'customer-list-dialog',
  templateUrl: 'customer-list-dialog.html',
})

export class CustomerListDialog implements OnInit {
  customerList : any;
  isupdated = false;
  displayedColumns: string[] = ['Customer ID', 'Hardware Key', 'Product', 'MSAN', 'CPE', 'Service Connections', 'License Key', 'Actions'];
  constructor(
    public dialogRef: MatDialogRef<AddProductDialog>,
    private generateLicenseService: GeneratelicenseService,
    @Inject(MAT_DIALOG_DATA) public data) {
  }

  ngOnInit() {
    console.log("before the call : "+this.customerList);
    if(this.customerList === undefined) {
      this.generateLicenseService.getCustomerDetails()
      .subscribe((data) => {
        this.customerList = data;
        //console.log("after the call : "+this.customerList);
      });
    }

  }

And the service.ts portion is:

getCustomerDetails() {
    let headers = new HttpHeaders({
      'Content-Type': 'application/json'
    })

    let options = {headers:headers, observer: 'response'};
    let result : Observable<Object> = this.http.get(this.url+'/customer/licenses',options);
    return result;
  }

Answer 1

If I'm understanding your question properly, you just want a simple text filter akin to your provided link?

I would suggest the simplest thing to do would be to change the input data source for your table from customerList to filteredCustomerList .

In your component, after receiving your customer list and saving it as customerList , also save it as another variable filteredCustomerList .

With the addition of your newest search input textbox, for example:

<input type="text" [(ngModel)]="filterText" (change)="onFilterChange()">

You can then change the filteredCustomerList contents - leaving the original customerList as the source of the data from which to filter otherwise untouched in the background. For example:

public onFilterChange(): void {
  if (!this.filterText || this.filterText.length === 0) {
    this.filteredCustomerList = this.customerList;
    return;
  }

  this.filteredCustomerList = this.customerList.filter(x => x.customerId.toString().includes(this.filterText));
}

I suspect that the filter would look something like that, given your concerns about data types (strings vs numeric types). At the end of the day, numbers have (everything has, frankly) a .toString() method available, so that you can compare the entered filter text vs the customer IDs.

This should have the desired effect of changing the input data source based on the entered filter text.

Edit: (change) event is only fired when focus is removed (clicked off the text box) or you hit enter. Switch to (keyup) if you want filtering as you type.

Quick example of the described mechanism working - StackBlitz