When i am submiting Matdialog from popup.it is working very well but orderItem object not getting any value from master page. i have injected the service in master component
i have submit all of my code below-
1. It is my Popup dialog Page
<form #from="ngForm" autocomplete="off" style="margin: 10px;" (submit)="Onsubmit(from)">
`Here have some input and dropdown `
<div class="form-group">
<button type="submit" class="btn btn-dark"><i class="fa fa-database"></i>Submit</button>
<button type="button" class="btn btn-outline-dark ml-1" (click)="CloseDialog()">
<i class="fa fa-close"></i>Close</button>
</div>
</form>
Below code is my component Class
import { Component, Inject, OnInit } from '@angular/core';
import { inject } from '@angular/core/testing';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { OrderItem } from '../shared/order-item.model';
import { NgForm } from '@angular/forms';
import { OrderService } from '../shared/order.service';
Onsubmit(form: NgForm) {
this.orderService.orderItems=[];
this.orderService.orderItems.push(form.value);
this.CloseDialog();
console.log(form.value);
}
}
3.Master Not updating service.orderItems
<table class="table table-borderless">
<thead class="thead-dark">
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th><a class="btn btn-sm btn-success" (click)="AddOrEditOrderItem(null,service.formData.OrderID)">
<i class="fa fa-plus"></i> Add Item</a></th>
</thead>
<tbody>
<tr *ngIf="service.orderItems.length==0">
<td class="text-center font-italic" colspan="5">
No food Item Selected for this Order.
</td>
</tr>
<tr ngFor="let Item of service.orderItems; let i=index"\>
<td>Item.ItemName</td>
<td>Item.Price</td>
<td>Item.Quantity</td>
<td>Item.Total</td>
<td><a class="btn btn-sm btn-info" (click)="AddOrEditOrderItem(i,service.formData.OrderID)"><i class="fa fa-pencil"></i></a></td>
</tr>
</tbody>
</table>
Master component Class
constructor(public service: OrderService, private dialog: MatDialog) { }
ngOnInit(): void {
this.resetForm();
}
resetForm(form?: NgForm) {
this.service.formData = {
OrderID: 0,
OrderNo: Math.floor(100000 + Math.random() * 900000).toString(),
CustomerID: 0,
PMethod: '',
GTotal: 0
}
this.service.orderItems = [];
}
AddOrEditOrderItem(OrderItemIndex: any, OrderID: any) {
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
dialogConfig.disableClose = true;
dialogConfig.width = "50%";
dialogConfig.data = { OrderItemIndex, OrderID }
this.dialog.open(OrderItemsComponent, dialogConfig);
}