How to display the proper element's property from array of objects in Angular

Question

I have a problem. I show the elements from an array of objects on Angular7. After click on "Add to cart" button, all the time I see only the first element's URL was displayed and not the clicked one (for example, I click on second element's button) Here is my code :

my.component.html

 <div *ngFor="let item of menuItems">
<div>
  <div>
    <p><img src="{{item.url}}" #catUrl></p>
  </div>
</div>
<div>
<button (click)="addToCart()" type="text"> Add to cart</button>
</div>

my.component.ts

  import { Component, ViewChild, ElementRef } from 
  '@angular/core';
  @Component({
  selector: 'my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
  })
export class BbqComponent {
 @ViewChild('catUrl') catUrl: ElementRef;
 constructor() {}
 addToCart() {
   console.log(this.catUrl.nativeElement.src);

 }

}

Thanks for advance.