Angular Material: matdialog not updating the value in my master page

22 views Asked by At

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

  }
0

There are 0 answers