MatSelect con buscador integrado con ngx-mat-select-search

Si trabajas con angular y material y te gustaría tener el select que viene por defecto con material pero con buscador integrado, sin duda este post te será utilidad.

Para probarlo bastará con seguir las indicaciones de la documentación oficial

Instalamos ngx-mat-select-search en nuestro proyecto

1
npm install --save ngx-mat-select-search

Importamos NgxMatSelectSearchModule en nuestro app.module.ts (O en módulo compartido, si estuvieras usando uno)

1
2
3
4
5
6
7
8
9
10
11
12
13
import { MatFormFieldModule, MatSelectModule } from '@angular/material';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';

@NgModule({
  imports: [
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatSelectModule,
    MatFormFieldModule,
    NgxMatSelectSearchModule
  ],
})
export class AppModule {}

En el repositorio de ngx-mat-select se ofrecen un puñado de ejemplos de como usarlo

Entre los ejemplos hay uno para hacer busquedas dinámicas con un servidor (La carpeta 05-server-side-search-example/), desgraciadamente el ejemplo no hace uso de llamadas reales a un api rest, se limita a simular una llamada real usando delay(500). No obstante tengo intención de hacer otro post explicando como usar ngx-mat-select-search con llamadas a una api rest real.

Espero que os haya gustado. No dudéis en dejar algún comentario