Subscribe set Global Variables

Hey guys,
i do get my Coupons over a subscribe function which is called when i initialize my page.

  private Initialize() {
    
    let id = this.activatedRoute.snapshot.paramMap.get('id');
    
    console.log("id: " + id);
    if (id) {
      this.CouponSubscription = this.couponController.GetCouponsByEmail('info@foxdev.ch').subscribe(res => {
        console.log(res);

        this.Coupon = res.find(x => x.id === id);
        //console.log(this.Coupon.DateOfRedeem.toMillis());
        this.isRedeemed = this.Coupon.DateOfRedeem.toMillis() != 0;
        this.isVaildDate = this.Coupon.DateOfActivation.toMillis() <= Date.now() && this.Coupon.DateOfExpiration.toMillis() >= Date.now();
      }); 
    }
  }

But the do not get set there because the object is undefined. Do i have to wait for these get loaded?
Can somebody help me?
Thanks

I need more information. You say “because the object is undefined.” What object is undefined?

I’m going to guess that you’re doing something like this in your template:

<div>{{coupon.something}}</div>

That is effectively asking the component controller code (the corresponding .ts file) to promise that coupon has to always be set to at least an empty object ({}), so what I would do is to initialize it thusly at the point of declaration:

coupon = {} as Coupon;

Note that I’ve renamed the instance variable from Coupon to coupon, because PascalCase means classes or interfaces, and we need Coupon to be the type of coupon.

There are other ways of dealing with this, such as guarding off the relevant template section with ngIf or using the AsyncPipe, but this is, I think, the simplest. Once the value of coupon changes to something more useful after the getCouponsByEmail call resolves, Angular change detection will do its thing and your app code shouldn’t have to do anything more.