Tarea 2

TheJonaCode · Sep 25, 2020 · 1988cdb · 1988cdb
1 parent fa8ff0a
commit 1988cdb
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 3 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -14,6 +14,7 @@ import { HomeComponent } from './components/home/home.component';
 import { AboutComponent } from './components/about/about.component';
 import { HeroesComponent } from './components/heroes/heroes.component';
 import { HeroeComponent } from './components/heroe/heroe.component';
+import { BuscadorComponent } from './components/buscador/buscador.component';
 
 @NgModule({
   declarations: [
@@ -22,7 +23,8 @@ import { HeroeComponent } from './components/heroe/heroe.component';
     HomeComponent,
     AboutComponent,
     HeroesComponent,
-    HeroeComponent
+    HeroeComponent,
+    BuscadorComponent
   ],
   imports: [
     BrowserModule,

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -4,12 +4,15 @@ import { HomeComponent } from './components/home/home.component';
 import { HeroesComponent } from './components/heroes/heroes.component';
 import { AboutComponent } from './components/about/about.component';
 import { HeroeComponent } from './components/heroe/heroe.component';
+import { BuscadorComponent } from './components/buscador/buscador.component';
+
 
 const APP_ROUTES: Routes = [
     { path: 'home', component: HomeComponent },
     { path: 'about', component: AboutComponent },
     { path: 'heroes', component: HeroesComponent },
     { path: 'heroe/:id', component: HeroeComponent},
+    { path: 'buscador/:termino', component: BuscadorComponent},
     { path: '**', pathMatch: 'full', redirectTo: 'home' }
 ];
 

diff --git a/src/app/components/buscador/buscador.component.html b/src/app/components/buscador/buscador.component.html
@@ -0,0 +1,22 @@
+<h1>Buscando: <small>{{termino}}</small></h1>
+<hr>
+
+<div class="card-columns">
+
+    <div class="card animated fadeIn fast" *ngFor="let heroe of heroes; let i = index">
+        <img [src]="heroe.img" class="card-img-top" [alt]="heroe.nombre">
+        <div class="card-body">
+          <h5 class="card-title">{{ heroe.nombre }}</h5>
+          <p class="card-text">{{ heroe.bio }}</p>
+          <p class="card-text"><small class="text-muted"> {{ heroe.aparicion }} </small></p>
+
+          <button (click) = "verHeroe(i)"
+            type="button" class="btn btn-outline-primary btn-block">
+              Ver más...
+          </button>
+          <!-- <a [routerLink]="['/heroe',i]" class="btn btn-outline-primary">Ver más Link... </a> -->
+
+        </div>
+      </div>
+
+</div>
diff --git a/src/app/components/buscador/buscador.component.ts b/src/app/components/buscador/buscador.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { HeroesService } from '../../servicios/heroes.service';
+
+
+@Component({
+  selector: 'app-buscador',
+  templateUrl: './buscador.component.html'
+})
+export class BuscadorComponent implements OnInit {
+
+  heroes: any[] = []
+  termino: string;
+
+  constructor( private activatedRoute:ActivatedRoute,
+                private _heroesservice: HeroesService) {
+
+   }
+
+  ngOnInit(): void {
+      this.activatedRoute.params.subscribe(params =>{
+        this.termino =params['termino'];
+        this.heroes = this._heroesservice.buscarHeroes( params ['termino']);
+        console.log( this.heroes);
+      });
+  }
+
+}
diff --git a/src/app/components/shared/navbar/navbar.component.ts b/src/app/components/shared/navbar/navbar.component.ts
@@ -1,18 +1,21 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html'
 })
 export class NavbarComponent implements OnInit {
 
-  constructor() { }
+  constructor( private router:Router) { }
 
   ngOnInit(): void {
   }
 
   buscarHeroe( termino:string){
-    console.log(termino);
+    //console.log(termino);
+    this.router.navigate(['/buscador', termino]);
   }
 
 }