Angular 6 - Dynamic Search with HttpParams + Pagination - pagination

Question

This is not a question. I am sharing the knowledge I gained after much research and testing. I built a search for optional fields using angle 6 and HttpParams. I am sharing this, because I searched a lot, not having been successful in the search.
Dev. Env.: Angular 6.0.9, Spring boot 2.0.7.
Form:
<form [formGroup]="searchForm" (ngSubmit)="submitSearch()">
<div class="row">
<div class="col-md-1">
<label>Código/Ano: </label>
</div>
<div class="col-md-2">
<input type="text" class="form-control form-control-sm" id="inputCodigo" formControlName="codigo" placeholder="código" maxlength="10">
</div>
<div class="col-md-1">
<input type="text" class="form-control form-control-sm" id="inputAno" formControlName="ano" placeholder="ano" maxlength="4">
</div>
<div class="col-md-1">
<label>Período: </label>
</div>
<div class="col-md-2">
<input type="text" class="form-control form-control-sm" placeholder="de" onfocus="(this.type = 'date')" formControlName="dataInicio">
</div>
<div class="col-md-2">
<input type="text" class="form-control form-control-sm" placeholder="ate" onfocus="(this.type = 'date')" formControlName="dataFinal">
</div>
<div class="col-md-1">
<input class="btn btn-primary btn-sm" type="submit" value="Buscar">
</div>
<div class="col-md-2">
<a [routerLink]="['/documentos/cadastro']" class="btn btn-sm btn-danger">Novo Documento</a>
</div>
</div>
Component:
export class DocumentosComponent implements OnInit {
documentos: Documento[];
searchForm: FormGroup;
docFiltro: DocumentoSearch = new DocumentoSearch();
constructor(
private documentoService: DocumentoService,
private fb: FormBuilder,
private page: Page
) {}
ngOnInit() {
this.page.page = "0";
this.createFormGroup();
this.getDocumentosByFilter();
}
getDocumentosByFilter() {
this.docFiltro = this.searchForm.value;
let searchParams = this.createSearchParam(this.docFiltro);
this.documentoService.findPage(searchParams).subscribe(
data => {
this.documentos = data["content"];
this.page.pages = new Array(data["totalPages"]);
},
error => {
console.log(error.error.message);
}
);
}
createSearchParam(docFiltro: DocumentoSearch): HttpParams {
let searchParams = new HttpParams()
searchParams = searchParams.set("page",this.page.page)
if (
docFiltro.codigo != null &&
docFiltro.codigo != undefined &&
docFiltro.codigo != ""
) {
searchParams = searchParams.set("codigo", docFiltro.codigo);
}
if (
docFiltro.ano != null &&
docFiltro.ano != undefined &&
docFiltro.ano != ""
) {
searchParams = searchParams.set("ano", docFiltro.ano);
}
if (
docFiltro.dataInicio != null &&
docFiltro.dataInicio != undefined &&
docFiltro.dataInicio != ""
) {
searchParams = searchParams.set("dataInicio", docFiltro.dataInicio);
}
if (
docFiltro.dataFinal != null &&
docFiltro.dataFinal != undefined &&
docFiltro.dataFinal != ""
) {
searchParams = searchParams.set("dataFinal", docFiltro.dataFinal);
}
return searchParams;
}
setPage(i, event: any) {
event.preventDefault();
this.page.page = i;
this.getDocumentosByFilter();
}
createFormGroup() {
this.searchForm = this.fb.group({
codigo: [""],
ano: [""],
dataInicio: [""],
dataFinal: [""]
});
}
submitSearch() {
this.page.page = '0';
this.getDocumentosByFilter();
}
}
Service method:
findPage(searchParams: HttpParams) {
return this.http.get<Documento[]>(`${API_URL}/sge/documento/search`, {params: searchParams});
}