title: How to create object of type interface in angular 4?
body: <p>I am working on a single page shopping store but stuck in a small problem. I have been trying to define an object of type interface but I am unable to save any value in this object.</p>
  
  <p>This is my code</p>
  
  <pre><code>interface ICartItem2 {
      total_items: number;
      total_sum: number;
  }
  
      items: Array&lt;ICartItem&gt; = []; //array of objects working fine
      totals:  ICartItem2; //this is my faulty object of type interface ICartItem2 
      total_items:number=0;
      total_sum:number = 0;
      cart: ICartItem;
      broadcast_obj = {items:[],totals:{}}; //object to store array of objects and single object
  </code></pre>
  
  <p>The main problem is this line </p>
  
  <pre><code>totals:  ICartItem2; 
  </code></pre>
  
  <p>It shows no error at declaration, but at the following line when I am storing values in this object and then showing main object it is showing undefined.</p>
  
  <pre><code>this.totals = {total_items:this.total_items,total_sum:this.total_sum}
  
  console.log(this.broadcast_obj.totals); // showing undefined
  </code></pre>
  
  <p>I have done same with array of objects and it is working fine </p>
  
  <pre><code>this.cart = {id:id, name: itemText, price: amount,quantity:1};
  this.items.push(this.cart);
  </code></pre>
  
  <p>and when I show in console(this.broadcast_obj.items); //it shows fine.</p>
  
  <p>Here is the full code</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { DataService } from '../data.service';
  interface ICartItem {
      id: number;
      name: string;
      price: number;
      quantity: number;
  }
  interface ICartItem2 {
      total_items: number;
      total_sum: number;
  }
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
  })
  
  export class HomeComponent implements OnInit {
  
      items: Array&lt;ICartItem&gt; = []; 
      totals:  ICartItem2;
      total_items:number=0;
      total_sum:number = 0;
      cart: ICartItem;
      broadcast_obj = {items:[],totals:{}};
      duplicate:ICartItem ;
      constructor(private _data: DataService) {  }
  
      ngOnInit() {
          //this.items_count = this.cart.length;
          this._data.cast.subscribe(res =&gt; this.broadcast_obj = res);
          this._data.changeCart(this.broadcast_obj);
      }
  
      additem(id,itemText,amount){
          if(this.items.length==0){//no item in the array
              this.cart = {id:id, name: itemText, price: amount,quantity:1};
              this.items.push(this.cart);
          }
          else{
              this.duplicate = this.items.find(x =&gt; x.id == id);//check if item already exists in the cart
              if (this.duplicate === null || this.duplicate === undefined) { //item object not found in the array
                  this.cart = {id:id, name: itemText, price: amount,quantity:1};
                  this.items.push(this.cart);
              }
              else if(this.duplicate.id===id){
                  this.duplicate.quantity++;
              }
          }
  
          this.broadcast_obj.items = this.items;
          this.total_items++;
          this.total_sum += amount;
          this.totals = {total_items:this.total_items,total_sum:this.total_sum}
  
          console.log(this.broadcast_obj.totals);
          this._data.changeCart(this.broadcast_obj);
      }
  
  }
  </code></pre>
  
  <p>Code of header component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { DataService } from '../data.service';
  
  interface ICartItem {
      id: number;
      name: string;
      price: number;
      quantity: number;
  }
  interface ICartItem2 {
      total_items: number;
      total_sum: number;
  }
  
  
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
  })
  export class HeaderComponent implements OnInit {
      cart: Array&lt;ICartItem&gt; = [];
      totals:  ICartItem2;
      total_items:number = 0;
      total_sum:number = 0;
      showHide: false; 
      constructor(private _data: DataService) {
  
      }
  
      ngOnInit() {
          this._data.cast.subscribe(res =&gt;{
              this.cart = res.items;
              this.total_items = res.totals.total_items;
              //this.total_sum =   res.totals.total_sum;
          });
      }
  
      addClass(toggle) {
          console.log(this.total_items);
          this.showHide = toggle;
      }
  
  }
  </code></pre>
  
  <p>service code</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  
  @Injectable()
  export class DataService {
  
      private cartobj = new BehaviorSubject&lt;any&gt;({});
      cast = this.cartobj.asObservable();
  
      constructor() { }
  
      changeCart(item_param) {
          this.cartobj.next(item_param);
      }
  
  }
  </code></pre>