@marxa/search v12.1.0

MxSearch

Componente para hacer un consultas con autocomplete de material

Primerso pasos

Si deseas elegir directamente una colección de Firestore deberás instalar @angular/fire

Sigue estos pasos para empezar un proyecto Firebase - Angular

1. Ve a Firebase console y pícale en Crear proyecto o selecciona alguno que ya hayas creado.
2. Ve a la configuración y baja a la parte Fireabase SDK y pícale en la opción de Configuracion.
3. Copia las lineas de código que están entre los corchetes
4. Ve a tu proyecto de Angular y entra en el archivo src/environments/environment.ts y pega las lineas de código en una variable nueva. El código se debe ver así:

   export  const  environment  =  {
   	production:  false,
   	firebaseConfig:  {
   		apiKey:  "AIzaS++++++++++++++++++++++++++",
   		authDomain:  "++++++++.firebaseapp.com",
   		projectId:  "++++++++",
   		storageBucket:  "+++++++++.appspot.com",
   		messagingSenderId:  "0000000000",
   		appId:  "1:000000000000:web:++++++++++++++",
   		measurementId:  "G-++++++++++"
   	}
   }; 

 5. Corre los siguientes comandos y sigue sus respectivas instrucciones:
	 `ng add @angular/fire`
	 `ng add @angular/material`
  6. Inicializa tu proyecto de **Firebases** en `app.module.ts`:
```ts
import { AngularFireModule } from "@angular/fire";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

7. Ahora sí, ya puedes instalar esta librería npm i -s @marxa/search

Modo de uso

Podrás hacer uso de el componente llamándolo desde el HTML

<mx-searcher
[selector]="'name'"
[items]="items"
(selected)="onSelect($event)"
></mx-searcher>

Si has instalado @angular/fire puedes seleccionar una colección en firestore

<mx-searcher
[selector]="'name'"
[collection]="items"
[lengthTrigger]="3"
(selected)="onSelect($event)"
></mx-searcher>

This library was generated with Angular CLI version 11.0.9.