Bdtjtk

I have performed the CRUD Application In Angular Using API and it is working fine but the problem is that when I am updating the values it is not showing the updated value instantly, I have to reload the page.

This is my app.component.ts:

import {Component} from '@angular/core';

import {HttpClient, HttpHeaders} from '@angular/common/http';

import {Employee} from './employees';

import {EditComponent} from './edit/edit.component';

import {AppService} from './app.service';

import {Router} from '@angular/router'; 



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

  providers: [AppService]

})



export class AppComponent {

    form:any = {}

    msg: string = null;

    employees: Employee;

    constructor(

    public http: HttpClient,private appService:AppService,private router: Router

    ){}



    onSubmit(){ 

      const httpOptions = {

        headers: new HttpHeaders({ 'Content-Type': 'application/json' })

      };



  this.http.post('http://127.0.0.1:8000/api/employee',this.form,httpOptions)

      .subscribe(employee=>{

        employee = employee;

        this.msg = 'Updated successfully!';

        this.getEmployee();

      });

    }



    ngOnInit() {

      this.getEmployee();

    }



    getEmployee():void{

       this.appService.getEmployees().subscribe(employees=>(this.employees = employees))

    }



    delete(employee: Employee): void{



      if(confirm("Are you sure want to delete ?")) {

        console.log("user details delete successfully!!");

      this.employees = this.employees.filter(h =>h !== employee);

      this.appService.deleteEmployees(employee.id).subscribe();

      this.msg = 'Employee  details delete successfully!!';

      }else{



    }

  }



      public editComponent: boolean = false;

      loadMyChildComponent($id) 

      {

        this.editComponent = true;

        this.appService.setCurrentId($id);

      }



}   

This is my edit.component.ts:

import {Component, OnInit, Input} from '@angular/core';

import {AppService} from '../app.service';

import {Employee} from '../employees';

import {Router} from '@angular/router'; 

import {HttpClient, HttpHeaders} from '@angular/common/http';

import {NgForm} from '@angular/forms';

import {Observable} from 'rxjs';

import { ActivatedRoute } from '@angular/router';

import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({

  selector: 'app-edit',

  templateUrl: './edit.component.html',

  styleUrls: ['./edit.component.css']

})



export class EditComponent implements OnInit {

  @Input() employee: Employee;

  form:any = {}

  msg: string = null;



  constructor(public http: HttpClient,private appService:AppService,private router: Router,private route: ActivatedRoute) { }



  ngOnInit(){

    this.editEmployees();

  }



  editEmployees():void{

    const id =  this.appService.getCurrentId();

    this.appService.editEmployees(id).subscribe(employee => {

    this.employee = employee;

    this.editEmployees();

   });

  }



  onformSubmit() 

  { 

     this.appService.updateEmployees(this.employee).subscribe(employee=>{

     this.employee = employee;

     this.msg = 'Updated successfully!';

    });



  }

}

This is my employees.ts:

export interface Employee{

    id: number;

    username:string;

    email:string;

    mobile:string;

    password:string;

}

This is my app.component.html: where I am showing the values and edit button.

<table class="table"> 

  <tr>

  <th>Id</th>

  <th>User Name</th>

  <th>Email</th>

  <th>Mobile</th>

  <th>Edit</th>

  <th>Delete</th>

  </tr>

  <tr *ngFor="let employee of employees">

    <td>{{employee.id}}</td>

    <td>{{employee.username}}</td>

    <td>{{employee.email}}</td>

    <td>{{employee.mobile}}</td>

    <td><button (click)="loadMyChildComponent(employee.id);" class="btn btn-primary" [routerLink]="['/edit',employee.id]">Edit</button></td>

    <td><button class="btn btn-danger" (click)="delete(employee)" > Delete</button></td>

</table>

This is my edit.component.html:

<div class="mydiv22">

    <p class="msg_success">{{ msg }}</p>

    <h2>Update Form</h2>

      <div class="row">

        <div class="col-md-12">

            <form name="form"  (ngSubmit)="f.form.valid && onformSubmit()" #f="ngForm" novalidate>



            <div class="form-group">

              <label for="username">User Name</label>

              <input type="text" class="form-control" name="username" [(ngModel)]="this.employee.username" #username="ngModel"

                [ngClass]="{'is-invalid': f.submitted && username.invalid}" required id="username"/>

              <div *ngIf="f.submitted && username.invalid" class="invalid-feedback">

                <div *ngIf="username.errors.required">>> required</div>

              </div>

            </div>

            <div class="form-group">

              <label for="email">Email</label>

              <input type="email" class="form-control" name="email" [(ngModel)]="this.employee.email" #email="ngModel" [ngClass]="{'is-invalid': f.submitted && email.invalid}"

                required email placeholder="Enter your email address" id="email"/>

              <div *ngIf="f.submitted && email.invalid" class="invalid-feedback">

                <div *ngIf="email.errors.required">>> required</div>

                <div *ngIf="email.errors.email">>> must be a valid email address</div>

              </div>

            </div>

            <div class="form-group">

                <label for="mobile">Mobile</label>

                <input type="number" class="form-control" name="mobile" [(ngModel)]="this.employee.mobile" #mobile="ngModel"

                  [ngClass]="{'is-invalid': f.submitted && mobile.invalid}" required placeholder="Enter your mobile" pattern="[789][0-9]{9}" minlength="10" id="mobile"/>

                <div *ngIf="f.submitted && mobile.invalid" class="invalid-feedback">

                  <div *ngIf="mobile.errors.required">>> required</div>

                  <div *ngIf="mobile.errors.pattern">>>Please enter a valid mobile number</div>

                </div>

              </div>

            <div class="form-group">

              <label for="password">Password</label>

              <input type="password" class="form-control" name="password" [(ngModel)]="this.employee.password" #password="ngModel"

                [ngClass]="{'is-invalid':f.submitted && password.invalid}" required minlength="6" placeholder="Create your password" id="password"/>

              <div *ngIf="f.submitted && password.invalid" class="invalid-feedback">

                <div *ngIf="password.errors.required">>> required</div>

                <div *ngIf="password.errors.minlength">>> must be at least 6 characters</div>

              </div>

            </div>

            <div class="form-group">

              <button routerLink="/edit" class="btn btn-success">Update</button>



            </div>

          </form>

        </div>

      </div>

    </div>

The flow is that: when i click the edit button in app.component.html, It will take the id and go to app.component.ts. From app.component.ts, it will go to app.service.ts where it will fetch the values from the API using particular Id. From the app.service.ts, it will pass the values to the edit.component.ts and using edit.component.ts, it will pass the values to edit.component.html.

It is performing every thing fine like when adding the value it is showing instantly, I don't have to reload the page but while updating the values we have to reload the page, it is not showing instantly like SPA.

I want to show the updated values instantly without updating the page. Any help is much appreciated.

You have three components in same page, it is something about component interactions.

Add Output event property in to EditComponent, emit an event after editing of employee , like this:

import { Output, EventEmitter } from '@angular/core'



export class EditComponent {



  @Output() updated = new EventEmitter<Employee>();



  onFormSubmit() { 

    this.appService.updateEmployees(this.employee).subscribe(employee=>{

      this.employee = employee;

      this.msg = 'Updated successfully!';

      // fire an updated event after edit employee.

      this.updated.emit(employee)

    });

  }



}

Then, subscribe to the event in app.component.html, like this:

<app-edit (updated)="onUpdated()"></app-edit>

And then, call getEmployee in onUpdated method to reload the employees list , like this:

export class AppComponent {



  onUpdated() {

    this.getEmployee();

  }



}

For more, please refer to https://angular.io/guide/component-interaction

You can add the similar logic to RegisterComponent to get a reload.