tarea 1

TheJonaCode · Sep 25, 2020 · 26156bf · 26156bf
1 parent 6368289
commit 26156bf
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 2 deletions.
diff --git a/src/app/components/heroe/heroe.component.html b/src/app/components/heroe/heroe.component.html
@@ -1 +1,26 @@
-<p>heroe works!</p>
+<h1 class="animated fadeIn"> {{heroe.nombre}} <small>{{heroe.aparicion}}</small></h1>
+<hr>
+
+<div class="row animated fadeIn fast">
+
+    <div class="col-md-4">
+
+        <img [src]="heroe.img" class="img-fluid" [alt]="heroe.nombre">
+        <br><br>
+        <a [routerLink]="['/heroes'] " class="btn btn-outline-danger btn-block">Regresar</a>
+
+    </div>
+
+    <div class="col-md-8">
+        <h3> {{heroe.nombre}} </h3>
+        <hr>
+        <p>
+            {{heroe.bio}}
+        </p>
+        <div>
+            <img *ngIf="heroe.casa=='Marvel'" class="img-logo" src="assets/img/marvel.png" alt="Marvel">
+            <img *ngIf="heroe.casa=='DC'" class="img-logo" src="assets/img/dc_logo.png" alt="DC">
+        </div>
+    </div>
+
+</div>
diff --git a/src/app/components/heroe/heroe.component.ts b/src/app/components/heroe/heroe.component.ts
@@ -18,6 +18,7 @@ export class HeroeComponent {
 
     this.activatedRoute.params.subscribe( params =>{
       this.heroe = this._heroesService.getHeroe( params['id'] );
+      console.log(this.heroe);
     } );
 
    }

diff --git a/src/assets/img/dc_logo.png b/src/assets/img/dc_logo.png
diff --git a/src/assets/img/marvel.png b/src/assets/img/marvel.png
diff --git a/src/assets/img/marvel_logo.png b/src/assets/img/marvel_logo.png
diff --git a/src/styles.css b/src/styles.css
@@ -5,7 +5,9 @@ body{
 .main-container{
     margin-top: 20px;
 }
-
+.img-logo{
+  width: 120px;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,6 +18,7 @@ export class HeroeComponent { @@
         this.activatedRoute.params.subscribe( params =>{
           this.heroe = this._heroesService.getHeroe( params['id'] );
+          console.log(this.heroe);
         } );
        }
@@ Expand Down @@