two way binding angular Problem [(ngModel)]

Question

I am showing my problem by giving a link to YouTube video:

Admin panel is the backend and the home page is the frontend

https://www.youtube.com/watch?v=6m882slecYA

Full source code for Front-end code:

You can find the source code for product-list.component.html in ( I used [(ngModel)] ) :

client-product-management\src\app\components\admin\product-list\product-list.component.html

I am also showing the address of home.component.html as well:

client-product-management\src\app\components\user\home\home.component.html

            <label for="name">Product Name</label>
            <input type="text" class="form-control input-text-custom" id="name" name="name" [(ngModel)]="selectedProduct.name" #name="ngModel" required />
            <div *ngIf="f.submitted && !name.valid" class="help-block">Product name is required.</div>
          </div>
          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !price.valid }">
            <label for="price">Price</label>
            <input type="number" class="form-control input-text-custom" id="price" name="price" [(ngModel)]="selectedProduct.price" #price="ngModel" required />
            <div *ngIf="f.submitted && !price.valid" class="help-block">Price is required.</div>
          </div>

          <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !explanation.valid }">
            <label for="explanation">Explanation</label>
            <textarea class="form-control" name="explanation" rows="8" id="explanation" required [(ngModel)]="selectedProduct.explanation" #explanation="ngModel" maxlength="1000"></textarea>
            <div *ngIf="f.submitted && !explanation.valid" class="help-block">Explanation is required.</div>
          </div>
        </div>

source code for home.component.html:

<div class="container">
  <div class="alert alert-danger" *ngIf="errorMessage">
    <strong>Error!</strong> {{errorMessage}}
  </div>
  <div class="alert alert-success" *ngIf="infoMessage">
    <strong>Successful!</strong> {{infoMessage}}
  </div>
  <div class="product-container">
    <div class="card">
      <div class="card-header">
        <div class="row">
          <div class="col col-xs-6">
            <h3 class="panel-title">All Products</h3>
          </div>
        </div>
      </div>
    </div>

    <div class="card-deck">
      <div class="card" style="width: 18rem;" *ngFor="let item of obs | async">
        <div class="custom-brand"><span class="glyphicon glyphicon-tag"></span></div>
        <div class="card-body">
          <h5 class="card-title">{{item.name}}</h5>
          <p class="card-text">{{item.explanation}}</p>
          <a class="btn btn-primary btn-custom-link" (click)="purchaseProduct(item)">Purchase</a>
          <a class="btn btn-secondary btn-custom-link" (click)="detail(item)">Detail</a>
        </div>
      </div>
    </div>
    <mat-paginator [pageSizeOptions]="[5, 20, 50]" showFirstLastButtons></mat-paginator>
  </div>
</div>

Code for AdminController.java

package com.sha.serverproductmanagement.controller;

import com.sha.serverproductmanagement.model.Product;
import com.sha.serverproductmanagement.model.StringResponse;
import com.sha.serverproductmanagement.model.User;
import com.sha.serverproductmanagement.service.ProductService;
import com.sha.serverproductmanagement.service.TransactionService;
import com.sha.serverproductmanagement.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

@RestController
public class AdminController {

    @Autowired
    private UserService userService;

    @Autowired
    private ProductService productService;

    @Autowired
    private TransactionService transactionService;

    @PutMapping("/api/admin/user-update")
    public ResponseEntity<?> updateUser(@RequestBody User user) {
        User existUser = userService.findByUsername(user.getUsername());
        if (existUser != null && !existUser.getId().equals(user.getId())) {
            return new ResponseEntity<>(HttpStatus.CONFLICT);
        }
        return new ResponseEntity<>(userService.updateUser(user), HttpStatus.CREATED);
    }

    //This can be also @DeleteMapping.
    @PostMapping("/api/admin/user-delete")
    public ResponseEntity<?> deleteUser(@RequestBody User user){
        userService.deleteUser(user.getId());
        return new ResponseEntity<>(HttpStatus.OK);
    }

    @GetMapping("/api/admin/user-all")
    public ResponseEntity<?> findAllUsers(){
        return new ResponseEntity<>(userService.findAllUsers(), HttpStatus.OK);
    }

    @GetMapping("/api/admin/user-number")
    public ResponseEntity<?> numberOfUsers(){
        Long number = userService.numberOfUsers();
        StringResponse response = new StringResponse();
        response.setResponse(number.toString());
        //to return it, we will use String Response because long is not a suitable response for rest api
        return new ResponseEntity<>(response, HttpStatus.OK);
    }
    @PostMapping("/api/admin/product-create")
    public ResponseEntity<?> createProduct(@RequestBody Product product){
        return new ResponseEntity<>(productService.saveProduct(product), HttpStatus.CREATED);
    }

    @PutMapping("/api/admin/product-update")
    public ResponseEntity<?> updateProduct(@RequestBody Product product){
        return new ResponseEntity<>(productService.updateProduct(product), HttpStatus.CREATED);
    }

    //This can be also @DeleteMapping.
    @PostMapping("/api/admin/product-delete")
    public ResponseEntity<?> deleteProduct(@RequestBody Product product){
        productService.deleteProduct(product.getId());
        return new ResponseEntity<>(HttpStatus.OK);
    }

    @GetMapping("/api/admin/product-all")
    public ResponseEntity<?> findAllProducts(){
        return new ResponseEntity<>(productService.findAllProducts(), HttpStatus.OK);
    }

    @GetMapping("/api/admin/product-number")
    public ResponseEntity<?> numberOfProducts(){
        Long number = productService.numberOfProducts();
        StringResponse response = new StringResponse();
        response.setResponse(number.toString());
        return new ResponseEntity<>(response, HttpStatus.OK);
    }

    @GetMapping("/api/admin/transaction-all")
    public ResponseEntity<?> findAllTransactions(){
        return new ResponseEntity<>(transactionService.findAllTransactions(), HttpStatus.OK);
    }

    @GetMapping("api/admin/transaction-number")
    public ResponseEntity<?> numberOfTransactions(){
        Long number = transactionService.numberOfTransactions();
        StringResponse response = new StringResponse();
        response.setResponse(number.toString());
        return new ResponseEntity<>(response, HttpStatus.OK);
    }
}

Answer 1

After glancing at your code (which by the way you should be posting a minimally viable example in your question rather than expecting people to go through your whole repository) I think you have a fundamental misunderstanding of how web applications work.

When you're running an Angular application, or really any web application, each page is only updated when one of two things happens:

1. The user initiates a change through controls or refreshing the page.
2. The page updates itself through a function.

You have no function in your home page that is causing it to check the API for new product data. Nor do you implement any form of messaging system where the client can be notified that data exists (look up how to build a chat app for more details on that).

Instead what you are showing in your video is essentially two instances of the app running. Angular is built around the idea of being a Single Page Application (SPA). It runs entirely in the browser window, and when you change routes the HTML is updated inside the same window via JavaScript. For two way binding to work you need to be within the same instance of the SPA.

On top of that, your home page isn't really set up for two way binding. That would be something more like being able to add a product directly on that page and the save function in TypeScript would add it to the collection that the template is using to build the page. That would cause an automatic update of the page's HTML. Or, you can edit the products on that page, and the data that is stored in memory in TypeScript gets updated automatically.

As far as your application is concerned, that second window you have open could be someone on the other side of the world looking at the home page. You have to ask yourself, "How would this page know that changes to the data have been entered into the database?"