Jhipster & Angular Filter

Question

I have a Spring-Boot based Jhipster generated project with Angular. In the project is a Person entity. I want to know how to filter the html CRUD table on inputs on firstname field.

So if I enter in the input "bob" I would get all names containing "bob". Similar to this question. This filter should get the data from backend/server side, and not just what is displayed on the current page.

I am new to Angular so a verbose answer about what files need to be modified would be helpful.

Filtering has been enabled in jhipster. I want the input to trigger a filter server-side.

My table looks like:

I tried have added to my html:

<th>
  <form [formGroup]="userForm" (ngSubmit)="onEnter()">
    <input type="text" class="form-control" formControlName="firstname">
    <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
  </form>
</th>

In the person.component.ts I have created a method to capture the enter event:

  onEnter(): void {
  alert(JSON.stringify(this.userForm.value));
  this.personService.lastnameContains(this.userForm.value)
  }

And looking at person.service.ts which has some examples for update, delete find, I have this method:

  lastnameContains(lastname: string): Observable<EntityArrayResponseType> {
  return this.http
    .get<IPerson[]>(`${this.resourceUrl}?lastname.contains=${lastname}`, { observe: 'response' })
    .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
 }

The URL the request is sent to should be :

"http://localhost:8080/api/people?lastname.contains=searchstring"

UPDATE

There is a generated query method in the service:

query(req?: any): Observable<EntityArrayResponseType> {
    const options = createRequestOption(req);
    return this.http
        .get<IPerson[]>(this.resourceUrl, { params: options, observe: 'response' })
        .pipe(map((res: EntityArrayResponseType) => this.convert1DateArrayFromServer(res)));
 }

But it does not seem to have a way to direct the request to the correct URL.

The above picture shows the code is being called. But nothing is sent to the server at all, let alone at /api/person?lastname="somestring"

How does one implement this filtering. Jhispter docs are scant at best.

This is normal, person is probably defined by *ngFor in table body and you're referring to it from the table header outside of the loop on rows. It's not clear whether you want to filter client side or server side. For server side, JHipster has JPA entity filtering, see jhipster.tech/entities-filtering — Gaël Marziou
@GaëlMarziou - thanks. I have updated question. If you are able to relook at an answer please? — Al Grant
Then use jhipster.tech/entities-filtering and modify your UI to add a search form. If your inputs are outside the ngFor then they must refer to variables defined in your component. There are plenty of tutorials on how to do this. — Gaël Marziou
Build a reactive form in your component and bind it to your input in template, see angular.io/guide/reactive-forms — Gaël Marziou
@Al-Grant - it's not React, it's 'reactive'... which is a coding paradigm. — tmptplayer

Al Grant Al Grant · Accepted Answer · 2020-04-20T21:56:16

Start with enabling filtering in jhipster as per here.

Note that the EntityQueryService talked about at the bottom of the page under Implementation is a Spring service, and is YourEntityNameQueryService.

Front end stuff, beginging with the html, here is the code changes that makes a filter on lastname.contains work:

person.component.html

<th>
    <form [formGroup]="userForm" (ngSubmit)="onEnter()">
        <input type="text" class="form-control" formControlName="firstname">
        <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
    </form>
</th>

In particular I added the [formGroup]="userForm" which binds the html to the correct model (person). In the input tags formControlName="firstname" binds the input the firstname field of the entity, and the (ngSubmit)="onEnter" means the data is submitted by the enter key. The second input is a phantom button to capture the Enter event.

person.component.ts

import { IPerson } from 'app/shared/model/person.model';
import { ITEMS_PER_PAGE } from 'app/shared/constants/pagination.constants';
import { PersonService } from './person.service';
import { PersonDeleteDialogComponent } from './person-delete-dialog.component';
import { FormGroup, FormControl} from '@angular/forms';

@Component({
  selector: 'jhi-person',
  templateUrl: './person.component.html'
})
export class PersonComponent implements OnInit, OnDestroy {
   userForm = new FormGroup({
   firstname: new FormControl('test')
})

The changes that needed to be made to person.component.ts are:

Added imports for FormGroup and FormControl;
Added new FormGroup with a firstname FormControl;

Further down person.component.ts is a handler for the Enter key event:

  onEnter(): void {
      alert(JSON.stringify(this.userForm.value));
      this.personService
        .query({'lastname.contains': 'wood'})
        .subscribe(
          (res: HttpResponse<IPerson[]>) => this.onSuccess(res.body, res.headers, -1),
          () => this.onError()
        );;
  }

The enter event calls the personService.query method which was automatically generated when you enable jhispter filtering (see here). This query method will handle all the requests made to the API for you. When you call the query you must correctly construct the parameters - in this case lastname.contains=wood which is hard coded for testing.

IPerson represents the Interface to Person model.

Jhipster & Angular Filter

2 Answers