Unable to calculate Total in my shopping-cart

Question

I Have created a shopping cart with 2 components(Productlist and cart list). when I click on the 'add to cart' button in the product list it is successfully moving into the service file and from the service file to 'cart list' but Total was showing undefined. Please help me to solve this cart Total issue.

Product-list.ts file

    import { Component, OnInit } from '@angular/core';
    import { ProductService } from '../../../service/product.service';
    import { CartService } from '../../../service/cart.service';
    
    @Component({
      selector: 'app-product-list',
      templateUrl: './product-list.component.html',
      styleUrls: ['./product-list.component.css']
    })
    export class ProductListComponent implements OnInit {
    
      Productlist = [];
    
    
      constructor(private productservice: ProductService,
                  private cartservice: CartService) {
    
        this.Productlist = this.productservice.send()
       }
    
      ngOnInit(): void {
      }
    
      saveproduct(item) {
    
        this.cartservice.get(item)
    
      }
    }

    

cart service file

    import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root'
    })
    export class CartService {
    
      cartproducts = [{Name: 'Mobile', Price: 13000, Qty: 1}]
    
      constructor() { }
    
    
      send() {
    
        return this.cartproducts
      }
    
       get(items) {
    
        this.cartproducts.push(items)
    
        console.log(this.cartproducts)
       }
    }
    

cart list file

    
    import { Component, OnInit, ɵConsole, ɵɵNgOnChangesFeature } from '@angular/core';
    import { CartService } from '../../../service/cart.service';
    
    @Component({
      selector: 'app-cart',
      templateUrl: './cart.component.html',
      styleUrls: ['./cart.component.css']
    })
    export class CartComponent implements OnInit {
    
      cartlist = [];
    
      Total: number;
    
      constructor( private cartservice: CartService) {
    
        this.cartlist = this.cartservice.send()
    
        console.log(this.cartlist);
    
        console.log(this.Total);
        
       }
    
      ngOnInit() {
    
        this.cartlist.forEach((_e: any) => {
    
          this.Total += (_e.qty * _e.price);
      
        });
      }
    }

Answer 1

When the Total property has been created, it is undefined by default until you assign it a value. You do assign a value to it in the ngOnInit but you calculate on an undefined value, so it returns undefined as well. Give Total a default value like so:

    ...

    Total: number = 0;

    ...

Also the code you put in ngOnInit to calculate the Total , would be better placed in a get property. This way, Total will always be calculated when it's requested instead of pre-rendered and only calculated once. In that case your code would look like:

    get Total(): number {
      let value = 0;
      this.cartlist?.forEach((_e: any) => {
          value += (_e.qty * _e.price);
        });
      return value;
    }