<ion-header>

<ion-toolbar>
<ion-title>
Compra de productos
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-list>
<ion-item *ngFor="let producto of productos">
<ion-label>{{ producto.nombre }}</ion-label>
<ion-input [(ngModel)]="producto.cantidad" type="number"></ion-input>
<ion-label>$ {{ producto.precio }}</ion-label>
</ion-item>
</ion-list>

<ion-button expand="full" (click)="calcularTotal()">Calcular total</ion-button>

<ion-item>
<ion-label>Total:</ion-label>
<ion-label>$ {{ total }}</ion-label>
</ion-item>

<ion-item *ngIf="descuento > 0">

<ion-label>Descuento:</ion-label>
<ion-label>{{ descuento }}%</ion-label>
</ion-item>

<ion-item *ngIf="totalConDescuento > 0">

<ion-label>Total con descuento:</ion-label>
<ion-label>$ {{ totalConDescuento }}</ion-label>
</ion-item>
</ion-content>

import { Component } from '@angular/core';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
productos = [
{ nombre: 'Producto 1', precio: 200 },
{ nombre: 'Producto 2', precio: 500 },
{ nombre: 'Producto 3', precio: 300 },
{ nombre: 'Producto 4', precio: 400 },
{ nombre: 'Producto 5', precio: 600 },
];
 total = 0;
descuento = 0;
totalConDescuento = 0;

calcularTotal() {
this.total = 0;
for (const producto of this.productos) {
this.total += producto.precio * producto.cantidad;
}

this.aplicarDescuento();
}

aplicarDescuento() {
if (this.total >= 1000 && this.total <= 1500) {
this.descuento = 5;
} else if (this.total > 1500 && this.total <= 2000) {
this.descuento = 10;
} else if (this.total > 2000) {
this.descuento = 25;
} else {
this.descuento = 0;
}

this.totalConDescuento = this.total - (this.total * this.descuento / 100);

}
}

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-venta',
templateUrl: './venta.page.html',
styleUrls: ['./venta.page.scss'],
})