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

Question

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>