Print a list of dishes selected and added using a different button on angular

Issue

Photo of what we have to build on angular

What we have so far

What we have so far II

We need to build a simple ordering system and we cannot figure out how to print several of the plates selected. We have only managed to print one plate when selecting it and pressing the + button. Does anyone know how to make the selections stay, even when selecting new dishes? Thank you in advance for the help!

import { Component } from '@angular/core';
import { PLATOS } from './lista-platos';
import { Plato } from './plato';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'Restaurante';

  selectedOption!: Plato;
  printedOption!: Plato;

  options = PLATOS;

  print() {
    
    this.printedOption = this.selectedOption;
    console.log('My input: ', this.selectedOption);
  }
}

import { Plato } from './plato';

export const PLATOS: Plato[] = [
  { name: 'Macarrones con chorizo', price: 8.90 },
  { name: 'Pasta al pesto', price: 10.20 },
  { name: 'Pizza', price: 7.80 },
  { name: 'Rollitos primavera', price: 5.50 },
  { name: 'Arroz tres delicias', price: 6.70 }
];

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<select [(ngModel)]="selectedOption">
  <option *ngFor="let o of options">{{ o.name }} ({{ o.price }}€)</option>
</select>
<button (click)="print()">+</button>

<!-- <div *ngFor="let o of options">
  <div *ngIf="o == printedOption">
    <p>{{ printedOption }}</p>
  </div>
</div> -->
<p>{{ printedOption }}</p>

Solution

Go with something like this: https://stackblitz.com/edit/angular-ivy-gxbejh

app-component ts:

import { Component } from '@angular/core';
import { PLATOS } from './lista-platos';
import { Plato } from './plato';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  selectedOption: any;
  options = PLATOS;
  takenPlatos: Plato[] = [];
  totalPrice: number = 0;

  addPlato(plato: Plato) {
    this.takenPlatos.push(plato);
    this.totalPrice += plato.price;
  }

  removePlato(index: number) {
    this.totalPrice -= this.takenPlatos[index].price;
    this.takenPlatos.splice(index, 1);
  }
}

app-component html:

<h2>ORDEN</h2>

Consumicion:
<select [(ngModel)]="selectedOption">
  <option *ngFor="let option of options; let i = index" [ngValue]="option">
    {{ option.name }} ({{ option.price }}€)
  </option>
</select>
<button (click)="addPlato(selectedOption)">+</button>

<ng-container *ngIf="takenPlatos.length > 0">
  <h3>Consumiciones:</h3>
  <table>
    <tr *ngFor="let plato of takenPlatos; let i = index">
      <th>{{ plato.name }}</th>
      <th>{{ plato.price }} €</th>
      <th><button (click)="removePlato(i)">-</button></th>
    </tr>
  </table>
  <table>
    <tr>
      <th>TOTAL</th>
      <th>{{ totalPrice }} €</th>
    </tr>
  </table>
</ng-container>

Answered By - Misha Mashina