Quantity Selector

Componente para seleccionar la cantidad del producto seleccionado

Componente que vamos a utilizar para seleccionar la cantidad de items que queremos obtener en el producto seleccionado.

Módulo

// your.module.ts
import { NgModule } from '@angular/core';
import { QuantitySelectorModule } from '@mugan86/ng-shop-ui';​
@NgModule({  
    declarations: [YourComponent],  
    imports: [    ...,
       QuantitySelectorModule  
    ]
})
export class YourModule { }

Componente

La estructura de las valoraciones deberá de ser la siguiente:

@Component({
  selector: 'app-your',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.scss']
})
export class YourComponent implements OnInit {
  product = {
    ...
    stock: 10,
    qty: 1
    ...
  };
  
  changeValue($event) {
    console.log($event);
  }

Pasar la información (HTML)

Teniendo los datos del producto, podemos asignar el número de elementos seleccionados, el límite de selección (teniendo en cuenta el stock) y añadimos un evento donde recibimos la notificación del cambio de valor

<shop-qty-selector
              [qty]="product.qty"
              [stock]="product.stock"
              (updateValue)="changeValue($event)"
            ></shop-qty-selector>

Resultado esperado

Última actualización