There is a method

product$!: Observable<Product>;

  getProduct(): void {
    this.product$ = this.route.params
      .pipe( switchMap( params => {
        return this.productServ.getById(params['id'])
      }))
  }

which returns, an object of type

export interface Product {
  type?: string
  id?: string
  title?: string
  date?: Date | undefined;
}

and a template that displays the properties of this object

<div *ngIf="product$ | async as product; else loading">
  <h2>{{ product.title}}</h2>

As a result of calling the (getProduct) method, the variable this.product$ may be undefined. Therefore, IDEA throws an error in this line of the template

<h2>{{ product.title}}</h2>

How is this problem solved correctly

• in the template, add a check *gif="product.title"
• or this problem should be solved in the code, then the question is how to do it correctly