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

DerekMT12 · Accepted Answer · 2016-10-21 00:20:24Z

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.

answered Oct 21, 2016 at 0:20

DerekMT12

1,35911 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wal Over a year ago

I actually have a method in app.component that computes the for cartPayableAmount. But that methods is only used inside app.component. I haven't tried the Observable implementation yet. I will give a try on that. Thanks

DerekMT12 Over a year ago

Even if that method is only used in one place, you should consolidate all shopping cart logic to one service.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related