title: TypeError: "ctx.cart is undefined"
body: <p>I'm working on pizza ordering app, and currently I'm trying to implement Cart.</p>
  
  <p>I have a cart for every user, and each cart contains following details: cart.ts</p>
  
  <pre><code>import { CartItem } from './cartitem';
  
  export class Cart {
      id: string;
      user: string;
      cartitems: CartItem[];
      grand_total: number;
  }
  </code></pre>
  
  <p>User can add items from the menu, which will become my cart items: cartitem.ts</p>
  
  <pre><code>import { Topping } from './topping';
  export class CartItem {
      id: string;
      name: string;
      baseprice: number;
      toppings: Topping[];
      extraprice: number;
      quantity= 1;
      total: number;
  }
  </code></pre>
  
  <p>So on adding an item to the cart, I'm making a PUT request on the API endpoint on the user cart, to put the cart item, and in response, I'm returning the cart contents from there.</p>
  
  <p>Here's how my cart.component.ts looks:</p>
  
  <pre><code>import { Component, OnInit, ViewChild, Inject, Injector } from '@angular/core';
  import { CartItem } from '../shared/cartitem';
  import { ActivatedRoute } from '@angular/router';
  import { CartService } from '../services/cart.service';
  import { map, catchError } from 'rxjs/operators';
  import { Cart } from '../shared/cart';
  
  @Component({
    selector: 'app-cart',
    templateUrl: './cart.component.html',
    styleUrls: ['./cart.component.scss']
  })
  export class CartComponent implements OnInit {
  
    cart: Cart;
    // cartitems: CartItem[];
  
    constructor(
      private route: ActivatedRoute,
      private cartService: CartService,
      @Inject('BaseURL')public BaseURL) { }
  
  
    ngOnInit(): void {
      this.updateCart();
  
    }
  
    updateCart() {
      this.cartService.mysubject.subscribe((value) =&gt; {
        console.log(value);
        this.cartService.getItems().subscribe(response =&gt; {
          console.log("Response in cart comp:", response);
  
          let cartContent = new Cart();
          cartContent.cartitems = response['cartitems'];
          cartContent.id = response['id'];
          cartContent.grand_total = response['grand_total'];
          cartContent.user = response['user'];
  
          this.cart = cartContent;
  
          console.log("Cart is:", this.cart);
  
        });
      });
    }
  
  }
  </code></pre>
  
  <p>Now issue here is that I'm not able to bind the data on cart.component.html side with 'cart', it generates this error- ERROR TypeError: "ctx.cart is undefined".</p>
  
  <p>I'm clueless on how to fix this. </p>
  
  <p><strong>Edit</strong>:
  Here is the cart.component.html:</p>
  
  <pre><code>&lt;h2&gt;Cart&lt;/h2&gt;
  &lt;div&gt;{{cart.user}}&lt;/div&gt;
  &lt;mat-list dense&gt;
      &lt;mat-list-item *ngFor="let cartitem of cart.cartitems"&gt;
          &lt;h2 matLine&gt;Item: {{cartitem.name}}&lt;/h2&gt;
          &lt;p matLine&gt;Base Price: ${{cartitem.baseprice}}&lt;/p&gt;
          &lt;p matLine [hidden]="cartitem.toppings == []"&gt;Extra Toppings:
              &lt;mat-list matLine&gt;
                  &lt;mat-list-item matLine *ngFor="let topping of cartitem.toppings"&gt;
                      &lt;h4 matLine&gt;{{topping.name}} : + ${{topping.rate}}&lt;/h4&gt;
                  &lt;/mat-list-item&gt;
              &lt;/mat-list&gt;
          &lt;/p&gt;
          &lt;button mat-mini-fab color="primary"&gt;&lt;i class="fa fa-minus-circle"&gt;&lt;/i&gt;&lt;/button&gt;&lt;div&gt;&lt;/div&gt;&lt;button mat-mini-fab color="primary"&gt;&lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/mat-list-item&gt;
  
  &lt;/mat-list&gt;
  
  &lt;div [hidden]="!cart.cartitems"&gt;&lt;h2&gt;Subtotal: ${{cart.grand_total}}&lt;/h2&gt;&lt;/div&gt;
  
  &lt;div [hidden]="cart.cartitems"&gt;
      &lt;p&gt; Your Cart is Empty!&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and error log:</p>
  
  <pre><code>ERROR TypeError: "ctx.cart is undefined"
      CartComponent_Template cart.component.html:2
      Angular 26
          executeTemplate
          refreshView
          refreshComponent
          refreshChildComponents
          refreshView
          refreshComponent
          refreshChildComponents
          refreshView
          refreshDynamicEmbeddedViews
          refreshView
          refreshComponent
          refreshChildComponents
          refreshView
          renderComponentOrTemplate
          tickRootContext
          detectChangesInRootView
          detectChanges
          tick
          next
          invoke
          onInvoke
          invoke
          run
          run
          next
          schedulerFn
      RxJS 5
      Angular 8
  core.js:6185:19
  
  </code></pre>