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);
}
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}
})
}
}