diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
index 2ef6204..8595b2a 100644
--- a/src/app/sidebar/sidebar.component.html
+++ b/src/app/sidebar/sidebar.component.html
@@ -2,25 +2,25 @@
 
   <h4 class="border-bottom border-white"> Mi compra </h4>
   <div class="overflow-auto mb-2">
-    <div class="card my-2 bg-primary border-0">
-      <img src="../../assets/descarga.jpg" class="card-img-top" alt="...">
+    <div class="card my-2 bg-primary border-0"  *ngFor="let prod of productos; let i = index">
+      <img src="{{prod.img}}" class="card-img-top" alt="...">
       <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
         <div class="col-8 p-0 text-left my-auto">
-          <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p>
-          <p class="m-0 card-description"><small>COD: 1234567</small></p>
+          <p class="m-0 card-description">{{prod.desc}}</p>
+          <p class="m-0 card-description">COD: {{prod.cod}}</p>
         </div>
         <div class="col-4 p-1 text-center my-auto">
-          {{90 | currency}}
+          {{prod.precio | currency}}
         </div>
       </div>
       <div class="row m-0 p-0">
         <div class="col p-1 pb-1 mt-2">
-          <button type="button" class="btn btn-light btn-sm float-left my-auto">X</button>
-          <button type="button" class="btn btn-light btn-sm my-auto">X</button>
+          <button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button>
+          <button type="button" class="btn btn-light btn-sm my-auto">Y</button>
           <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
-            <button type="button" class="btn btn-light btn-sm mb-2">+</button>
-            <label for="" class="border border.white px-1">12</label>
-            <button type="button" class="btn btn-light btn-sm mb-2">-</button>
+            <button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(prod.cantidad)">+</button>
+            <label for="" class="border border.white px-1">{{prod.cantidad}}</label>
+            <button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador()">-</button>
           </div>
         </div>
       </div>
diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts
index 60de369..d97f7bd 100644
--- a/src/app/sidebar/sidebar.component.ts
+++ b/src/app/sidebar/sidebar.component.ts
@@ -7,9 +7,84 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SidebarComponent implements OnInit {
 
+  private cont: number = 1;
+  private min: number = 1;
+  private max: number =50;
+
+  private productos = [
+    {
+      "id": 1,
+      "desc": "Galletas Oreo",
+      "cod": 225412,
+      "precio": 15,
+      "img": "./assets/descarga.jpg",
+      "cantidad": 1
+    },
+    {
+      "id": 2,
+      "desc": "Coca cola 500ml",
+      "cod": 512632,
+      "precio": 40,
+      "img": "./assets/descarga.jpg",
+      "cantidad": 1
+    },
+    {
+      "id": 3,
+      "desc": "Pancho grande",
+      "cod": 775987,
+      "precio": 45,
+      "img": "./assets/descarga.jpg",
+      "cantidad": 1
+    }
+  ];
+
   constructor() { }
 
   ngOnInit() {
+    this.getProductosCarrito();    
+  }
+
+  getProductosCarrito(){
+    return this.productos;
+    
+  }
+
+  public aumentarContador(cant){ 
+    console.log("llego");
+    for (const i of this.productos) {
+      if (cant === this.max) {                
+        return i.cantidad;
+      } else{
+        ++i.cantidad        
+        return i.cantidad;
+      }
+    } 
+    // if (this.cont === this.max) {
+    //   this.cont;
+    //   return this.cont;
+    // } else {
+    //   ++this.cont;
+    //   return this.cont; 
+    // }  
+         
+  }  
+
+  decrementarContador(){
+    if (this.cont === this.min) {
+      this.cont;
+      return this.cont;
+    } else {
+      --this.cont;
+      return this.cont;
+    }
   }
 
+  deleteProducto(index){
+    for (let i = 0; i < this.productos.length; i++) 
+      if (i === index) {
+        this.productos.splice(i,1);  
+        return this.productos ;   
+      }      
+      
+    }
 }