Full Stack Development with JHipster - Second Edition

Adding a filtering functionality

Finally, let's add some good old client-side filtering to the page:

1. First, let's add a new instance variable called filter of the string type to the ProductComponent class in the product.component.ts file:

export class ProductComponent implements OnInit, OnDestroy {    ...    filter: string;    constructor(        ...    ) {    ...    }    ...}

JHipster provides an option to enable server-side filtering using the JPA metamodel. Another option is to enable Elasticsearch, for which JHipster will automatically create full-text search fields for every entity. You should use these for any serious filtering requirements you might have.

2. Now let's use this variable in the product.component.html file. Add the highlighted snippet from the following ...