TypeError: Cannot read property 'title' of undefined-Help me :(

Question

I'm writing an Angular project Linked to the JAVA project I did, I had to import a coupon into a component from the DB to view it to the user. That's why I created a function to do this:

import { Component, OnInit } from '@angular/core';
import { Coupon } from 'src/app/models/coupon';
import { ActivatedRoute } from '@angular/router';
import { CouponsService } from 'src/app/services/coupons.service';

@Component({
  selector: 'app-coupon-details',
  templateUrl: './coupon-details.component.html',
  styleUrls: ['./coupon-details.component.css']
})
export class CouponDetailsComponent implements OnInit {
  public coupon: Coupon;
  public constructor(private activeRoute: ActivatedRoute, private couponService : CouponsService) { }

  public ngOnInit() {
    const id = +this.activeRoute.snapshot.params.id;
    this.couponService.getCouponByIdRest(id).subscribe(c => {
    }, err=>{
      console.log("error:", err.message);
    });
  }
}

As you can see the function will get an ID at the click and pass us to the coupon that will show us the details of the coupon, the function runs a JAVA function on the server side which returns the coupon according to the ID, and here I encounter an error:

ERROR TypeError: Cannot read property 'title' or undefined
    at Object.eval [as updateRenderer] (CouponDetailsComponent.html: 4)

This is the class HTML file:

<div >
  <h1>Coupon Details:</h1>

  <h3>Coupon Title: {{coupon.title}}</h3> 
  <h3>Coupon Start Date: {{coupon.startDate}}</h3>
  <h3>End Date: {{coupon.endDate}}</h3>
  <h3>Category: {{coupon.category}}</h3> 
  <h3>Amount: {{coupon.amount}}</h3> 
  <h3>Description: {{coupon.description}}</h3> 
  <h3>Price: {{coupon.price}}</h3>
  <!-- <img style="width: 300px;" src="assets/imagess/products/{{product.id}}.jpg" alt="coupon"> -->
</div>
<div *ngIf="!coupon">
  <h1>Product not found</h1>
</div>
<br>
<button style="font-size: large;" onclick="history.back(-1)">Back to Our-Deals</button>

The system does not seem to recognize the coupon? The title? I checked that everything was listed properly and couldn't find a problem As you can see I just started writing in angular, if you need more information to help me I'd love to send it

Answer 1

In your component you never assing your api response to coupon variable like this

 this.couponService.getCouponByIdRest(id).subscribe(c => { this.coupon = c}, err=>{
  console.log("error:", err.message);

});

And in your component.html you can bind like this

<h1>{{coupon?.title}}</h1>