84.mostrar-resultados-en-pantalla

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from '@angular/common/http';
 
 
 //Modules
@@ -14,7 +15,12 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
+    //Angular
     BrowserModule,
+    HttpClientModule,
+    //Third parties...
+
+    //Mis Modulos
     SharedModule,
     GifsModule,
 

src/app/gifs/busqueda/busqueda.component.ts

@@ -20,7 +20,10 @@ export class BusquedaComponent implements OnInit {
   buscarTexto(  ){
     const valor = this.txtBuscar.nativeElement.value;
 
-    // console.log( valor );
+     if (valor.trim().length === 0){
+       return;
+     }
+
     this.gifsService.buscarGifs( valor );
 
     this.txtBuscar.nativeElement.value = '';

src/app/gifs/resultados/resultados.component.html

@@ -1,5 +1,26 @@
 <div class="col">
   <hr>
-  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore distinctio, iste accusamus consequatur ut eligendi quos et tempore explicabo delectus, inventore voluptas corporis maiores incidunt illum. Voluptatem quo ab eveniet?</p>
+
+
+   <div class="row">
+     <div *ngFor="let gif of resultados"
+     class="col-md-4 col-sm-6">
+      <div class="card">
+        <img
+        [src]="gif.images.downsized_medium.url"
+        [alt]="gif.title"
+        class="card-image-top
+        ">
+        <div class="card-body">
+          <div class="card-text">
+            <!-- {{ gif.title }} -->
+            {{ gif.images.downsized_medium.url }}
+          </div>
+        </div>
+      </div>
+     </div>
+   </div>
+
+
 
 </div>

src/app/gifs/resultados/resultados.component.ts

@@ -1,16 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { GifsService } from '../sevices/gifs.service';
 
 @Component({
   selector: 'app-resultados',
   templateUrl: './resultados.component.html',
   styles: [
   ]
 })
-export class ResultadosComponent implements OnInit {
+export class ResultadosComponent {
 
-  constructor() { }
-
-  ngOnInit(): void {
+  get resultados(){
+    return this._gifsService.resultados;
   }
 
+  constructor(  private _gifsService:GifsService, ) { }
+
+
 }

src/app/gifs/sevices/gifs.service.ts

@@ -1,20 +1,46 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class GifsService {
 
+
+  private apiKey:string = 'l5riPVpNTboaKKKjqUAe81u9PmKLfRhG';
   private _historial:string[] = [];
 
+
+  //TODO cambiar el tipado de any por el correspondiente
+  public resultados:any[] = [];
+
   get historial (){
     return [...this._historial];
   }
 
+  constructor (  private http:HttpClient, ) {}
+
   buscarGifs( query:string ){
-    this._historial.unshift( query );
 
-    console.log(this._historial);
+    query = query.trim().toLowerCase();
+
+    if (!this._historial.includes( query ) ){
+
+      this._historial.unshift( query );
+      this._historial = this._historial.splice(0,10);
+
+    }
+
+    // console.log(this._historial);
+
+    this.http.get(`https://api.giphy.com/v1/gifs/search?api_key=l5riPVpNTboaKKKjqUAe81u9PmKLfRhG&q=${ query }&limit=10`)
+    .subscribe( ( resp:any ) => {
+      console.log( resp.data );
+      this.resultados = resp.data;
+    })
+
+
+
   }
 
 

src/app/shared/sidebar/sidebar.component.html

@@ -7,7 +7,7 @@ <h3 class="text-light display-6">
     <a href="#"
       class="list-group-item list-group-item-action"
       *ngFor="let item of historial"
-      >{{item}}
+      >{{item | titlecase}}
     </a>
 
   </div>

src/app/shared/sidebar/sidebar.component.ts

@@ -15,4 +15,6 @@ export class SidebarComponent {
 
   constructor(  private _gifsService: GifsService, ){}
 
+
+
 }