0

que tal :) Estoy trabajando con una API, en concreto la de Flickr, me funciona y todo. Ahora mismo funciona de manera que introduciendo un valor en un input, busca en la API y lo imprime por pantalla. Mi duda es, quiero hacer un botón que al pulsarlo busque un tema en especifico, por ejemplo, flores. ¿Sabéis de alguna manera de como conseguirlo? Os dejo una captura de pantalla de como lo tengo ahora mismo. introducir la descripción de la imagen aquí

  <h1 class="text-center">Flickr</h1>
  <div class="form-group">
    <input type="search" class="form-control" (keyup)="search($event)" placeholder="Search images">
  </div>
  <div class="form-group">
    <button type="search" class="form-control" (keyup)="search($event)" placeholder="Flores">
///Este es el boton que quiero convertir para que busque "Flores"
</button>
  </div>

  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 p-3" *ngFor="let image of images">
      <div class="card">
        <a href="{{image.url}}_b.jpg" target="_blank">
          <img src="{{image.url}}_m.jpg" title="{{image.title}}">
        </a>
      </div>
    </div>
  </div>
  <div
    class="search-results"
    infiniteScroll
    [infiniteScrollDistance]="2"
    [infiniteScrollThrottle]="50"
    (scrolled)="onScroll()">
  </div>
</div>
´´´
1
  • No sabemos nada de ese API, deberias al menos incorporar a la pregunta como es, como se accede a ella, que has probado y que errores te ha dado. En lugar de una pregunta concreta con un error concreto, parece una tarea.
    – masterguru
    el 21 feb. 2022 a las 12:16

1 respuesta 1

0

En tu ejemplo usas (keyup)="search($event)" para capturar cada tecla que pulsas en el teclado y esto lanza en tu component.ts el metodo search(event:any){} que busca en la api de flick y te devuelve un array de objetos llamado imagenes.

Ahora si no quieres que el proceso se ejecute solo cuando hagas click en el boton es sencillo.

<div class="form-group">
    <input type="search" class="form-control" [(ngModel)]="palabraBuscar" placeholder="Search images">
  </div>

 <div class="form-group">
    <button type="search" class="form-control" (click)="buscar()" placeholder="Flores"></button>
  </div>

En tu component.ts

export class EjemploComponent implements  {

palabraBuscar : string = '';

constructor(private apiService:ApiService){}


buscar(){
// aqui envias al servicio que busca a tu api enviandole el criterio a buscar

this.apiService.getFlores(this.palabraBuscar).subscribe(resp=>{
    console.log(resp);
});

}

Solo te queda realizar en tu service la consulta a tu api

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.