How to make a reusable material dialog?

See more:

dialog

Typescript

I have made a template-form from where, clicking on a button opens a dialog box and shows it value. There are other buttons in that form whose values I also want to show in the same dialog box.

<div class="p-3">
  <div class="mt-2 container-food-details pl-2 pt-3 pr-2 pb-3 align-items-center justify-content-between w-100">
    <div class="d-flex w-100 justify-content-between">
      <div class="d-flex">
        <div style="width: 10rem">
          <app-editable-input [text]="foodModel.standardName" (onUpdate)="foodModel.standardName = $event"></app-editable-input>
        </div>
        <mat-icon style="margin-left: 0.5rem; margin-top: 0.6rem; font-size: 2rem;cursor: pointer;" (click)="openDialog()">language</mat-icon>
      </div>
      <div class="food-rating">
        <div class="ratings pr-2">
          <p class="heading mr-2 mt-2">1.5</p>
          <ngx-stars
            [readonly]="false"
            [maxStars]="5"
            [color]="'#00FF00'"
            [size]="2"
            [initialStars]="1.5"
          ></ngx-stars>
        </div>
        <p class="contents">This food's rating</p>
      </div>
    </div>
    <div class="mt-4">
      <div class="header">Available Servings</div>
    </div>
    <table class="table-details w-100">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Carbohydrates</th>
        <th>Fats</th>
        <th>Protein</th>
        <th>Calories</th>
        <th>Lang</th>
        <th>Status</th>
        <th>Action</th>
      </tr>
      <tr *ngFor="let food of foodModel.servings; let i = index"> <!-- 'as' assigned serving. Donot use 'as'. -->
        <td>{{ food.id }}</td>
        <td>
          <div>
            <app-editable-input [text]="food.localisedName | head" (onUpdate)="food.localisedName= $event"></app-editable-input>
          </div>
        </td>
        <td>
          <app-editable-input [text]="food.carbs" [unit]="'gms'"></app-editable-input>
        </td>
        <td>
          <app-editable-input [text]="food.fats" [unit]="'gms'"></app-editable-input>
        </td>
        <td>
          <app-editable-input [text]="food.protein" [unit]="'gms'"></app-editable-input>
        </td>
        <td>
          <div style="margin-left: 1rem;">{{ food.calories }} kcals</div>
        </td>
        <td>
          <mat-icon style="margin-left: 0.6rem;" (click)="openDialog()">language</mat-icon>
        </td>
        <td>
          <div class="boolean">
            <mat-icon>lens</mat-icon>
            Active
          </div>
        </td>
        <td>
          <mat-icon style="margin-left: 0.5rem;" (click)="onClickDelete(i)">delete</mat-icon>
        </td>
      </tr>
    </table>
    <div class="d-flex flex-column align-items-center">
      <div class="serving-btn">
        <button class="new-serving pt-2" (click)="onClickAddServing()">
          <mat-icon>add_circle_outline</mat-icon>
          <p>Add New Serving</p>
        </button>
      </div>
      <div class="update-btn">
        <button class="discard-btn" (click)="back()">Discard</button>
        <button class="save-btn">Save Changes</button>
      </div>
    </div>
  </div>
</div>

As you can see,

openDialog()

has been called two times. It worked when I first called the function, but what do I do when I call it the second time. How do I replace the value of the first function call with the value of the second function call?

What I have tried:

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
import { ModalAllComponent } from '../modal/modal-all/modal-all.component';

export interface FoodModel {
  standardName: string;
  localisedName: {
    code: string;
    title: string;
    value: string;
  }[];
  ratingInfo?: {
    rating: number;
    title: string;
  };
  servings: Serving[];
};

interface Serving {
  id?: number;
  standardName: string;
  localisedName: {
    lang: string;
    value: string;
  }[];
  carbs: number;
  protein: number;
  fats: number;
  calories:number;
  langs: string;
}

@Component({
  selector: 'app-food-details',
  templateUrl: './food-details.component.html',
  styleUrls: ['./food-details.component.scss']
})
export class FoodDetailsComponent implements OnInit {
  name!:any
  localName!:any

  foodModel: FoodModel = {
    standardName: '',
    localisedName: [],
    servings: []
  };

  constructor(private router: Router, private dialog:MatDialog) { }

  ngOnInit(): void {

  }

  onClickAddServing(): void {
    const serving: Serving = {
      standardName: '',
      localisedName: [
        {
          lang: 'en',
          value: ''
        }
      ],
      carbs: 0,
      protein: 0,
      fats: 0,
      calories:0,
      langs: 'en, fr, fr-CA'
    };
    this.foodModel.servings.push(serving);

    //const val = serving.localisedName.map(i => i.value)
  }

  onClickDelete(index: number) {
    this.foodModel.servings.splice(index, 1);
  }

  back() {
    this.router.navigate(['food-content']);
  }

  openDialog(){
    const dialogRef = this.dialog.open(ModalAllComponent, {
      width: '14.5rem',
      data:{ name: this.foodModel.standardName}
    })
  }
}