How to access declared variable from app.component to other components?

Question

I am new to Typescript and Angular 2. I tried to look for an answer in the web but it seems they don't work for me.

Say I have an app.component as shown below:

export class AppComponent{
    cartPayableAmount = 0;

    ........
}

---

in my app.component.html, the cartPayableAmount is used here

<div> {{cartPayableAmount}} </div>

Now I want to access the cartPayableAmount entity in other class as shown below: So when ever I envoke TestHere() the value for cartPayableAmount will change and it will reflect at the app.component.html.

export class BuyTestComponent {
    TestHere() {
        // should update cart PayableAmount here.....
        cartPayableAmount  = "Some value"
    }
}

Please help. Thanks

Answer 1

You can create a new service, maybe called ShoppingCart, that holds that value. And then it can be injected into your components.

But in your example, cartPayableAmount is a computed value, so you'll want it to be a method or Observable that computes it instead of a class property.