Number of elements on cart refreshes only after page refresh Angular 8

Question

I'm working on a simple shopping MEAN stack application. On the header component I have a cart with badge that shows number of elements on the user's cart,when I click on add to cart button (which is situated on my products component), the product is added normally but the number of elements on cart only updates when I refresh the page. This is my header template code :


                

                
                        
                            
                 Cart
                {{getSize()}}

This is my header component code:

    import { Component, OnInit, Input } from '@angular/core';
import { AuthentificationService } from '../authentification.service';

import { ProduitsService } from '../produits.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  user;
  isConnected = false;
  private panier: [];
  size=0; 


  constructor(private AuthService : AuthentificationService,
    private produitsService: ProduitsService) { }


    setSize(quantite){
      this.size+=quantite;
    }
    getSize(){
      console.log(this.panier.length);
     return this.size;
    }

  ngOnInit() {  
    this.AuthService.getUser().subscribe(data =>{


      this.AuthService.getUser().subscribe(data =>{
        console.log(data);
        this.user = data;
        if ( this.user ){Â this.isConnected = true;}
        else {Â this.isConnected = false;}
        console.log("est connectÃ© : " + this.isConnected );
        this.produitsService.getproduitsPanier(this.user).subscribe(data => {
         // console.log("received : " + JSON.stringify(data));
          this.panier = data;
          if (this.panier) //dans le cas oÃ¹ le panier n'est pas encore initialisÃ©
          this.size = this.panier.length; 
          console.log("produits : " + this.panier);
        });

    });



  });


  }



}

And this is my product component code:

    import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProduitsService } from '../produits.service';
import { AuthentificationService } from '../authentification.service';
import { Observable } from 'rxjs';
import {HomeComponent} from '../home/home.component'

@Component({
  selector: 'app-produits',
  templateUrl: './produits.component.html',
  styleUrls: ['./produits.component.css']
})

export class ProduitsComponent implements OnInit {

  private produits: Object[] = new Array();
  user;
  isConnected = false;
  produitAEnvoyer = {
    "email":"",
    "img" :"",
    "nom" :"",
    "marque" : "",
    "prix" : "",
    "quantite" :""
  };

  constructor(
    private route: ActivatedRoute,
    private produitsService: ProduitsService,
    private AuthService : AuthentificationService,
    private HomeComponent : HomeComponent) {

      }

  ajouterAuPanier(img, nom, marque, prix){


    this.produitAEnvoyer.email = this.user;
    this.produitAEnvoyer.img = img;
    this.produitAEnvoyer.nom = nom;
    this.produitAEnvoyer.marque = marque;
    this.produitAEnvoyer.prix = prix;

    console.log(this.produitAEnvoyer);
    this.produitsService.ajouterAuPanier(this.produitAEnvoyer).subscribe(data => {
      console.log(data);
    })
  }

  updateQuantite(value){
    this.produitAEnvoyer["quantite"] = value;
    console.log("quantite :"+this.produitAEnvoyer.quantite);
  }


  ngOnInit() {

    this.produitsService.getProduits().subscribe(produits =>{

      this.produits = produits;


      for (const p of this.produits) {
        this.produits.sort();
        console.log(JSON.stringify(p));
      }
  });


  this.AuthService.getUser().subscribe(data =>{
    console.log(data);
    this.user = data;
    if ( this.user ){Â this.isConnected = true;}
    else {Â this.isConnected = false;}
    console.log("est connecte : " + this.isConnected+" email :"+this.user);

});


  }

}

Edit 1: This is also my product template :

    










                    
    Catalog of All Our Products ! 
                    

                








  Product
  Brand
   Price
   Quantity
  Action




    
        
    
        
        
             {{produit.nom}} 

        
     
     
         
             {{produit.marque}}  
        
 
    
     
         
            USD  {{produit.prix}} $ 
            (For 1 quantity) 
        
 
    
     
         
             
        
 
    
         
          Add to cart

LALIT KANTA DIBYADARSHAN · Accepted Answer

Using Service and Rxjs subject can solve your problem.

When add or remove button is clicked, the header must be informed that some event occurred and updated the latest value. For that Service can be used as the communication channel.

Note: @input and @output can be used only if components are in the parent-child relationship. So for this case using Service is the best option.

To update the value in the header component Observable can be used.

header.component.ts

export class HeaderComponent {
    ...

    ngOnInit() {
        this.appService.getCount().subscribe(count => {
          this.totalItem = count
          }
        );
    }

    ...
}

appService

export class AppService {
  count = 0;
  simpleObservable = new Subject();
  simpleObservable$ = this.simpleObservable.asObservable();
  constructor() { }
  addCount() {
    this.count+=1;
    this.simpleObservable.next(this.count)
  }
  removeCount() {
    if (this.count > 0) { this.count-=1 };
    this.simpleObservable.next(this.count)
  }
  getCount(){
    return this.simpleObservable$;
  }
}

Demo

Number of elements on cart refreshes only after page refresh Angular 8

Answers (2)

Related Questions