mostrando lista de usuarios

pablo384 · Sep 19, 2018 · 38f6925 · 38f6925
1 parent e99b4d3
commit 38f6925
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/app/usuarios/lista/lista.component.html b/src/app/usuarios/lista/lista.component.html
@@ -1,3 +1,12 @@
-<p>
-  lista works!
-</p>
+<div class="card-columns">
+  <div class="card" *ngFor="let user of usuarios">
+    <img class="card-img-top" [src]="user.avatar">
+    <div class="card-body">
+      <h5 class="card-title">{{user.first_name}} {{user.last_name}}</h5>
+      <p class="card-text">
+        This content is a little bit longer.</p>
+      <p class="card-text">
+        <span class="text-muted">ID: {{user.id}}</span></p>
+    </div>
+  </div>
+</div>
diff --git a/src/app/usuarios/lista/lista.component.ts b/src/app/usuarios/lista/lista.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { UsuarioService } from '../../services/usuario.service';
+import { Usuario } from '../../models/usuario.model';
 
 @Component({
   selector: 'app-lista',
@@ -8,13 +9,17 @@ import { UsuarioService } from '../../services/usuario.service';
 })
 export class ListaComponent implements OnInit {
 
+  usuarios: Usuario[] = [];
   constructor(
     public userS: UsuarioService
   ) { }
 
   ngOnInit() {
     this.userS.getUsers().subscribe(
-      users => console.log(users)
+      users => {
+        this.usuarios = users;
+        console.log(users);
+      }
     );
   }