Refresh angular material table without reload after crud operation

angular angular-material asp.net-core asp.net-web-api entity-framework-core

Question

hi there i'm using angular(v.9) and i'm using asp .net core web api and ef core(v 3.1) for doing crud operations

i have region component form which i used as dialog here region form

the html code for the form is regiondetails.html

<form [formGroup]="service.form"  (submit)="onsubmit()" min-width="200px">

    <mat-toolbar color="primary" width="auto">
            <span>Region</span>

    <span class="fill-remainings"></span>   
    <span>  <button mat-button matSuffix mat-icon-button arial-label="Clear" tabindex="1" (click)="onclose()"><mat-icon>close</mat-icon></button></span>      
    </mat-toolbar><br>
    <mat-grid-list cols="1" rowHeight="300px" min-width="100px">
        <mat-grid-tile>
            <div class="controles-container">
                <input formControlName="Id" type="hidden">
                <mat-form-field>
                    <input maxlength="6" formControlName="Code"  (keyup)= "service.checkcode()"matInput placeholder="Code*"  tabindex="2" autocomplete="off">
                    <mat-error *ngIf="service.form.controls['Code'].errors?.required">the field should not be empty</mat-error>
                    <mat-error *ngIf="service.form.controls['Code'].errors?.pattern">Enter only Alphabetic characters</mat-error>
                    <mat-error *ngIf="service.form.controls['Code'].errors?.notUnique">Code already exist</mat-error>
                </mat-form-field><br><br>
                <mat-form-field>
                    <input maxlength="50" formControlName="Description" matInput placeholder="Description*" tabindex="3" autocomplete="off" >
                    <mat-error *ngIf="service.form.controls['Description'].errors?.required">the field should not be empty</mat-error>
                    <mat-error *ngIf="service.form.controls['Description'].errors?.pattern">Enter only  Alphabetic characters</mat-error>
                </mat-form-field>

                <h2 class="example-margin">Active</h2>

                    <mat-slide-toggle
                          class="example-margin" [checked]=lstatus color="primary"  tabindex="4" (change)="toggle($event)"
                          formControlName="Active">
                          <label class="labeltoggle">{{Active}}</label>
                    </mat-slide-toggle>

                    <div class="button-row">

             <button mat-raised-button class="btn warning btn-xs" type="submit" tabindex="5"  [disabled]="service.form.invalid" >Save</button>
             |<button mat-raised-button class="btn btn-primary btn-xs"
                 (click)="onclear()" tabIndex="6" [disabled]= "clear">Clear</button>
            </div>
             </div>
            </mat-grid-tile>
    </mat-grid-list>


</form>

ts file RegionDetails.ts

onsubmit() {
     debugger
     if (this.service.form.valid) {
       if (this.service.form.get('Id').value) {
          this.service.updateregion(this.service.form.value).subscribe(
           res =>{ this.service.form.reset();
          this.dialogref.close();
        this.notificationService.update('updated Successfully');
           },
           err => {
             console.log(err);
           }
          );

       } else {
         this.service.insertregion(this.service.form.value).subscribe(
           res =>{
             this.service.form.reset();
         this.dialogref.close();
         this.service.initializeForm();
       this.notificationService.success('submitted Successfully');
           },
           err => {
             console.log(err);
           }
         );

       }
     }
   }

insertregion function in service

insertregion(region: Region) {
    console.log(region);
   return this.http.post(this.apiurl,region);
  }

my material table looks like this... enter image description here

create button function on table

oncreate() {
   this.service.form.reset();
   this.service.initializeForm();
  const dialogconfig = new MatDialogConfig();
  dialogconfig.disableClose = false;
  dialogconfig.autoFocus = true;
  dialogconfig.width = '400px';
  this.dialog.open(RegionDetailsComponent, dialogconfig);
    this.router.navigateByUrl("Region")
}

i used a button click to refresh the page the function for button click is

buttonClick() {
  this.router.navigateByUrl('Country');
  this.router.onSameUrlNavigation;
  this.router.navigateByUrl('Region')
}

when i do insert operation the table did not get refresh automatically,but it get updated in the database, it only get refresh after i route to other url's or reload the page....

any one give me a solution to refresh the table and page without reload and get inserted data in material table.....thanks in advance

1
0
3/12/2020 1:29:16 PM

Accepted Answer

You can use afterClosed() method from Angular Dialog. So you call your API again when the modal close.

When you close the modal, you have to send the new Region values

oncreate() {
  this.dialog
    .open(RegionDetailsComponent, dialogconfig)
    .afterClosed()
      .pipe(
        filter(newValues => !!newValues) // If you have formValues
      ).subscribe(newValues => {
      // YOU HAVE TO REPLACE YOUR TABLE CONTENT WITH newValues
    });
}

And in your modal.ts

onsubmit() {
  this.service.updateregion(this.form.value)
    .subscribe(values => this.dialogref.close(values))
}

Please note that you can go further. I have not test this code.

0
3/12/2020 2:18:15 PM


Related Questions





Related

Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow