Ajustes del código y nuevo componente digimons-individual

src/app/app-routing.module.ts

@@ -3,15 +3,12 @@ import { Routes, RouterModule } from '@angular/router';
 
 //Importo a todos mis componentes
 import { DigimonsHomeComponent } from './components/digimons-home/digimons-home.component';
-import { DigimonIdComponent } from './components/digimons-buscador/digimon-id/digimon-id.component';
-import { DigimonNombreComponent } from './components/digimons-buscador/digimon-nombre/digimon-nombre.component';
-import { DigimonNivelComponent } from './components/digimons-buscador/digimon-nivel/digimon-nivel.component';
+import { DigimonsBuscadorComponent } from './components/digimons-buscador/digimons-buscador.component';
+
 
 const routes: Routes = [
   { path: 'home', component:  DigimonsHomeComponent},
-  { path: 'digimonsId', component:  DigimonIdComponent},
-  { path: 'digimonsNombre', component:  DigimonNombreComponent},
-  { path: 'digimonsNivel', component:  DigimonNivelComponent},
+  { path: 'buscador', component:  DigimonsBuscadorComponent},
   { path: '**', pathMatch: 'full', redirectTo: 'home' }
 ];
 

src/app/app.component.ts

@@ -1,17 +1,18 @@
 import { Component } from '@angular/core';
-import { DigiAPI } from './../interfaces';
+import { ArregloDigimon } from './../interfaces';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  public digimons:Array<DigiAPI>;
+ public digimones: Array<ArregloDigimon>; //declaro una variable arreglo de los datos de la interfaz
 
-  exportDigimons(digimons:Array<DigiAPI>):void{
-    if(this.digimons !== digimons){
-      this.digimons = digimons;
-    }
+ mostrarPokemonOrigen(digimones: Array<ArregloDigimon>):void{//metodo que retorna un array de digimon interfaz
+  if(this.digimones !== digimones){//Si es distinto lo igualo al parametro entrada
+    this.digimones = digimones;
   }
+
+ }
 }

src/app/app.module.ts

@@ -8,18 +8,16 @@ import { DigimonsService } from './services/digimons.service';
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './components/shared/navbar/navbar.component';
 import { DigimonsHomeComponent } from './components/digimons-home/digimons-home.component';
-import { DigimonIdComponent } from './components/digimons-buscador/digimon-id/digimon-id.component';
-import { DigimonNombreComponent } from './components/digimons-buscador/digimon-nombre/digimon-nombre.component';
-import { DigimonNivelComponent } from './components/digimons-buscador/digimon-nivel/digimon-nivel.component';
+import { DigimonsBuscadorComponent } from './components/digimons-buscador/digimons-buscador.component';
+import { DigimonsIndividualComponent } from './components/digimons-individual/digimons-individual.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     NavbarComponent,
     DigimonsHomeComponent,
-    DigimonIdComponent,
-    DigimonNombreComponent,
-    DigimonNivelComponent
+    DigimonsBuscadorComponent,
+    DigimonsIndividualComponent
   ],
   imports: [
     BrowserModule,

src/app/components/digimons-buscador/digimons-buscador.component.html

@@ -0,0 +1,3 @@
+<p>
+  digimons-buscador works!
+</p>

src/app/components/digimons-buscador/digimons-buscador.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-digimons-buscador',
+  templateUrl: './digimons-buscador.component.html',
+  styleUrls: ['./digimons-buscador.component.css']
+})
+export class DigimonsBuscadorComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/digimons-home/digimons-home.component.css

@@ -1,30 +0,0 @@
-.card-columns .card {
-    transition: all 0.3s linear;
-    -webkit-transition: all 0.3s linear;
-}
-
-.card-columns .card:hover {
-    box-shadow: 0px 0px 10px #5f7484;
-    cursor: pointer;
-}
-
-.card-columns .card .card-body .card-title {
-    display: flex;
-    align-items: center;
-}
-
-.card-columns .card .card-body .card-title .identificador {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: black;
-    border-radius: 100%;
-    font-weight: bold;
-    width: 50px;
-    height: 50px;
-    background: white;
-    border: 2px solid black;
-    margin: 0 10px 0 0;
-    padding: 5px;
-    text-align: center;
-}

src/app/components/digimons-home/digimons-home.component.html

@@ -1,17 +1,7 @@
 <div class="loading" *ngIf="!digimonsCargados">
     Loading Digimons ...
 </div>
-
 <div class="card-columns" *ngIf="digimonsCargados && digimons">
-    <div class="card" *ngFor="let digi of digimons; let i = index">
-        <div class="card-block">
-            <div class="card-body">
-                <h5 class="card-title"><span class="identificador">{{digi.id}} </span> {{digi.name | uppercase}}</h5>
-            </div>
-            <img [src]="digi.img" class="img-fluid card-img-top" [alt]="digi.name" [title]="digi.name">
-            <div class="card-footer">
-                <small class="text-muted">{{digi.level}}</small>
-            </div>
-        </div>
-    </div>
+    <!-- Es toda la información de un digimon alojada en un componente hijo -->
+    <app-digimons-individual [index]="i" [digimon_individual]="miDigimon" *ngFor="let miDigimon of digimons; let i = index"></app-digimons-individual>
 </div>

src/app/components/digimons-home/digimons-home.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { DigiAPI, ArregloDigimon } from 'src/interfaces';
 import { DigimonsService } from 'src/app/services/digimons.service';
-import { digimonsModels } from 'src/app/models/digimons';
+import { UsuarioModels } from 'src/app/models/usuarios';
 
 @Component({
   selector: 'app-digimons-home',
@@ -10,7 +10,10 @@ import { digimonsModels } from 'src/app/models/digimons';
 })
 export class DigimonsHomeComponent implements OnInit {
 
+  @Output() digiOrigen = new EventEmitter();
   digimons: ArregloDigimon;
+  digiAPI : DigiAPI;
+  misNuevosDigimons:any[];
   digimonsCargados: boolean;
 
   constructor(private digimonService: DigimonsService) { }
@@ -22,18 +25,20 @@ export class DigimonsHomeComponent implements OnInit {
 
   getDigimons(): void{
       this.digimonService.getDigimon().subscribe((data: ArregloDigimon) =>{
-        this.digimons = data;
-        console.log(this.digimons);
+        this.digimons = data;//Guardo el data del suscribe y lo asocio
         this.digimonsCargados = true;
+        console.log(this.digimons);
 
+        //Como ya es una matriz no se puede recorrer, debido al get del service
+        //https://stackoverflow.com/questions/53680000/angular-subscribe-push-object-to-array
         /*for (var i = 0; i < this.digimons.mounstruos.length; i++) {
           console.log(this.digimons.mounstruos[i]);
           if(this.digimons.mounstruos[i].id === '10'){
             this.digimonsCargados = true;
           }
         }*/
 
-        /*this.digimons.mounstruos.forEach(o => {
+        /*this.misNuevosDigimons.forEach(o => {
           console.log(o);
         });*/
       });

src/app/components/digimons-individual/digimons-individual.component.css

@@ -0,0 +1,30 @@
+.card {
+    transition: all 0.3s linear;
+    -webkit-transition: all 0.3s linear;
+}
+
+.card:hover {
+    box-shadow: 0px 0px 10px #5f7484;
+    cursor: pointer;
+}
+
+.card .card-body .card-title {
+    display: flex;
+    align-items: center;
+}
+
+.card .card-body .card-title .identificador {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: black;
+    border-radius: 100%;
+    font-weight: bold;
+    width: 50px;
+    height: 50px;
+    background: white;
+    border: 2px solid black;
+    margin: 0 10px 0 0;
+    padding: 5px;
+    text-align: center;
+}

src/app/components/digimons-individual/digimons-individual.component.html

@@ -0,0 +1,11 @@
+<div class="card">
+    <div class="card-block">
+        <div class="card-body">
+            <h5 class="card-title"><span class="identificador">{{digimon_individual.id}} </span> {{digimon_individual.name | uppercase}}</h5>
+        </div>
+        <img [src]="digimon_individual.img" class="img-fluid card-img-top" [alt]="digimon_individual.name" [title]="digimon_individual.name">
+        <div class="card-footer">
+            <small class="text-muted">{{digimon_individual.level | uppercase}}</small>
+        </div>
+    </div>
+</div>

src/app/components/digimons-individual/digimons-individual.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-digimons-individual',
+  templateUrl: './digimons-individual.component.html',
+  styleUrls: ['./digimons-individual.component.css']
+})
+export class DigimonsIndividualComponent implements OnInit {
+
+  @Input() digimon_individual:any = {} //Llamo el evento input (hijo de padre) para usarlo en el componente principal
+  @Input() index: number; //Capturo el index del for
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/shared/navbar/navbar.component.html

@@ -1,23 +1,27 @@
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <a class="navbar-brand" [routerLink]="['home']">Digimons</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-    <div class="collapse navbar-collapse" id="navbarNav">
-        <ul class="navbar-nav">
-            <li class="nav-item active">
-                <a class="nav-link" [routerLink]="['home']">Inicio <span class="sr-only">(current)</span></a>
+    <a class="navbar-brand" [routerLink]="['home']">
+        <img src="assets/img/logo.png" alt="agumon" width="100" height="50" title="Inicio">
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item" routerLinkActive="active">
+                <a class="nav-link " [routerLink]="[ 'home'] ">Inicio <span class="sr-only ">(current)</span></a>
             </li>
-            <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Buscar por
-              </a>
-                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                    <a class="dropdown-item" [routerLink]="['digimonsId']" routerLinkActive="active">ID</a>
-                    <a class="dropdown-item" [routerLink]="['digimonsNombre']" routerLinkActive="active">Nombre</a>
-                    <a class="dropdown-item" [routerLink]="['digimonsNivel']" routerLinkActive="active">Nivel</a>
-                </div>
+            <li class="nav-item" routerLinkActive="active ">
+                <a class="nav-link" [routerLink]="[ 'buscador'] ">Buscar</a>
             </li>
         </ul>
+        <!--<form class="form-inline my-2 my-lg-0 ">
+            <input class="form-control mr-sm-2 " type="text " [(ngModel)]="search " (ngModelChange)="searchEvent() " (keyup.enter)="searchEvent() " placeholder="id, nombre, nivel " aria-label="Search ">
+            <button class="btn btn-outline-success my-2 my-sm-0 " *ngIf="search " type="button " (click)="searchEvent( '') ">Buscar Digimon</button>
+        </form>-->
+        <form class="form-inline my-2 my-lg-0 ">
+            <input class="form-control mr-sm-2 " type="search " placeholder="id, nombre, nivel " aria-label="Search ">
+            <button class="btn btn-outline-secondary my-2 my-sm-0 " type="submit ">Buscar</button>
+        </form>
     </div>
 </nav>