ERROR TypeError: Cannot read properties of undefined (reading 'imageUrl') Angular material

When I write this line of html code:

<td> <img align="center" [src]="productByBarCode.imageUrl" /> </td>


The console throws the following error:

ERROR TypeError: Cannot read properties of undefined (reading 'imageUrl')
​

imageUrl is of type string and it is an url. I'm using Angular material. How can I deal with it?

.html file:

<table>

<!-- Image Column -->
<ng-container matColumnDef="img">
<th mat-header-cell *matHeaderCellDef></th>
<td> <img align="center" [src]="productByBarCode.imageUrl" /> </td>
</ng-container>

...

</table>


.ts file:

export class ProductDetailsComponent implements OnInit {
public productByBarCode!: Product;
displayedColumns = ['img', 'name', 'description', 'price', 'quantity', 'add to cart'];
constructor(private _snackBar: MatSnackBar, private shared: SharedService, private productService: ProductService) { }

ngOnInit(): void {
this.shared.castByBarCode.subscribe(productByBarCode=>this.productByBarCode=productByBarCode);
...
}

Continue reading...