80.GifsService

src/app/app.module.ts

@@ -1,14 +1,23 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
+
+//Modules
+import { SharedModule } from './shared/shared.module';
+import { GifsModule } from './gifs/gifs.module';
+
+//Components
 import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    SharedModule,
+    GifsModule,
+
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/gifs/busqueda/busqueda.component.html

@@ -0,0 +1,10 @@
+<div class="col">
+  <h5 class="pb-3 display-5">Buscar:</h5>
+  <input
+  type="text"
+  class="form-control shadow mb-4 p-3 border border-4 rounded-pill"
+  placeholder="Buscar Gifs..."
+  (keyup.enter)="buscarTexto( )"
+  #txtBuscar
+  >
+</div>

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

@@ -0,0 +1,32 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { GifsService } from '../sevices/gifs.service';
+
+@Component({
+  selector: 'app-busqueda',
+  templateUrl: './busqueda.component.html',
+  styles: [
+  ]
+})
+export class BusquedaComponent implements OnInit {
+
+  @ViewChild('txtBuscar') txtBuscar!:ElementRef<HTMLInputElement>;
+
+  constructor(  private gifsService:GifsService, ) { }
+
+  ngOnInit(): void {
+  }
+
+
+  buscarTexto(  ){
+    const valor = this.txtBuscar.nativeElement.value;
+
+    // console.log( valor );
+    this.gifsService.buscarGifs( valor );
+
+    this.txtBuscar.nativeElement.value = '';
+
+  }
+
+
+
+}

src/app/gifs/gifs-page/gifs-page.component.html

@@ -0,0 +1,8 @@
+<div class="row">
+  <app-busqueda></app-busqueda>
+</div>
+
+
+<div class="row">
+<app-resultados></app-resultados>
+</div>

src/app/gifs/gifs-page/gifs-page.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-gifs-page',
+  templateUrl: './gifs-page.component.html',
+  styles: [
+  ]
+})
+export class GifsPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/gifs/gifs.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GifsPageComponent } from './gifs-page/gifs-page.component';
+import { BusquedaComponent } from './busqueda/busqueda.component';
+import { ResultadosComponent } from './resultados/resultados.component';
+
+
+
+@NgModule({
+  declarations: [GifsPageComponent, BusquedaComponent, ResultadosComponent],
+  exports:[
+    GifsPageComponent,
+
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class GifsModule { }

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

@@ -0,0 +1,5 @@
+<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>

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-resultados',
+  templateUrl: './resultados.component.html',
+  styles: [
+  ]
+})
+export class ResultadosComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GifsService {
+
+  private _historial:string[] = [];
+
+  get historial (){
+    return [...this._historial];
+  }
+
+  buscarGifs( query:string ){
+    this._historial.unshift( query );
+
+    console.log(this._historial);
+  }
+
+
+}

src/app/shared/shared.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SidebarComponent } from './sidebar/sidebar.component';
+
+
+
+@NgModule({
+  declarations: [
+    SidebarComponent,
+
+  ],
+  exports:[
+    SidebarComponent,
+
+  ],
+  imports: [
+    CommonModule,
+  ]
+})
+export class SharedModule { }

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

@@ -0,0 +1,16 @@
+<div class="bg-dark text-light border-right p-3" id="sidebar">
+  <h3 class="text-light display-6">
+    Gifs App
+  </h3>
+  <hr>
+  <div class="list-group list-reset">
+    <a href="#"
+      class="list-group-item list-group-item-action"
+      *ngFor="let item of historial"
+      >{{item}}
+    </a>
+
+  </div>
+</div>
+
+

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { GifsService } from '../../gifs/sevices/gifs.service';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styles: [
+  ]
+})
+export class SidebarComponent {
+
+  get historial (){
+    return this._gifsService.historial;
+  }
+
+  constructor(  private _gifsService: GifsService, ){}
+
+}

src/index.html

@@ -6,8 +6,12 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+<!-- CSS only -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
 </head>
 <body>
   <app-root></app-root>
+  <!-- JavaScript Bundle with Popper -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
 </body>
 </html>

src/styles.css

@@ -1 +1,13 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body{
+height: 100%;
+}
+#sidebar{
+  height: 100%;
+  min-height: 100vh;
+  min-width: 180px;
+}
+.main-container{
+  margin-top: 30px;
+}