I am sending an object having two values 1- array 2- simple variable
This object is receiving in another component using observable and from there I am accessing object values directly into the html template file

Here is the code

Homecomponent

```
export class HomeComponent implements OnInit {
    itemscount:Number = 0;
    cart = [];
    cartobj = {};
    constructor(private _data: DataService) { }

    ngOnInit() {
        this.itemscount = this.cart.length;
        this._data.cast.subscribe(res => this.cartobj = res);
        this._data.changeCart(this.cartobj);

    }

    additem(itemText){
        this.cart.push(itemText);
        this.itemscount = this.cart.length;
        this.cartobj = {cart_items:this.cart,items_count:this.itemscount}
        this._data.changeCart(this.cartobj);
    }
}

```

Header component

```
export class HeaderComponent implements OnInit {
    cartobj: any;
    cart = [];
    constructor(private _data: DataService) {

    }

    ngOnInit() {
        this._data.cast.subscribe(res =>  this.cartobj = res);
        //this.cart = this.cartobj.cart_items;
    }

}

```

header component html template 

```
<li *ngFor="let items of cartobj.cart_items">
    {{ items }}
</li>

{{cartobj.items_count}}

```

Dataservice code

```
export class DataService {

    private cartobj = new BehaviorSubject<any>({});
    cast = this.cartobj.asObservable();

    constructor() { }

    changeCart(item_param) {
        this.cartobj.next(item_param);
        console.log(this.cartobj);
    }

}

```

Currently I am accessing the object directly in header html template. I just want to access the object in the header component file first and then in the html template.

Thanks.