<file_sep># kawaiifrutas

[Edit on StackBlitz ⚡️](https://stackblitz.com/edit/kawaiifrutas)<file_sep>import { Component, EventEmitter, Input, Output } from '@angular/core';
export type Fruta = {
  nombre: string;
  cantidad: number;
  precio: number;
};

@Component({
  selector: 'app-carta',
  templateUrl: './carta.component.html',
  styleUrls: ['./carta.component.css']
})
export class CartaComponent {
  @Input() frutas: Fruta[];
  @Output() pagarFrutas = new EventEmitter();
  borrarFrutaCarrito(index: number): void {
    this.frutas.splice(index, 1);
  }
  obtenerTotal(): number {
    let result = 0;
    this.frutas.forEach(fruta => {
      result = result + fruta.precio * fruta.cantidad;
    });
    return result;
  }
  pagar(): void {
    this.pagarFrutas.emit(this.frutas)
  }
}
<file_sep>import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Fruta } from '../carta/carta.component';

@Component({
  selector: 'app-objeto',
  templateUrl: './objeto.component.html',
  styleUrls: ['./objeto.component.css']
})
export class ObjetoComponent  {
 @Input() fruta : Fruta = { nombre : "", precio : null , cantidad : null};
 @Output() borrarFruta = new EventEmitter();

borrar(){
    this.borrarFruta.emit(this.fruta.nombre)
};
}<file_sep>import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ListaCompraComponent } from './Componentes/lista-compra/lista-compra.component';
import { CartaComponent } from './Componentes/carta/carta.component';
import { ObjetoComponent } from './Componentes/objeto/objeto.component';


@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, ListaCompraComponent, CartaComponent, ObjetoComponent, ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
<file_sep>import { Component } from '@angular/core';
import { Fruta } from '../carta/carta.component';


@Component({
  selector: 'app-lista-compra',
  templateUrl: './lista-compra.component.html',
  styleUrls: ['./lista-compra.component.css']
})
export class ListaCompraComponent {

frutas : Fruta [] = [];
  nuevafruta : Fruta = {
  nombre: "",
  cantidad: null,
  precio:null,
};

 anadir(): void {
    if (
      this.isValid(this.nuevafruta)
    ) {
      this.frutas.push(this.nuevafruta);
      this.nuevafruta = {nombre:"",cantidad:null,precio:null}
    }
  };
isValid(nuevafruta: Fruta): boolean {
if (!nuevafruta?.nombre) {    
      alert('Indica el nombre de la fruta');
      return false;
    }
    if (this.frutas.some(i => i.nombre == nuevafruta.nombre)) {    
      alert('Esta fruta ya está en el carrito');
      return false;
    }
    if (!nuevafruta?.cantidad) {    
      alert('Indica la cantidad');
      return false;
    }
    if (!nuevafruta?.precio) {
      alert('Indica el precio');
      return false;
    }
    return true;
  }
  pagar() :void {
    this.frutas = [];
    alert ("Pago Completado");
  }
}
