How can display my array images in modal dialog box individually in angular 13 - angular13

Question

Hi i m beginner i m creating a project in that project i have to display array data using *ngFor in div. my issue is that when i clicked view details button then one modal dialog box will open in that modal box only first image is showing in all divs on click details button, how can display their related image only in their modal box
Html
<div class="container-fluid">
<div class="menuItem" *ngFor="let items of menuItems;let i=index">
<img src="../../../assets/{{items.image}}" alt=""height="200px" width="40%" >
<div class="menumod1">
<div class="odrnow1">
<h3 >{{items.dishName}}</h3> <h4>{{items.price}}</h4>
<button>Order Now</button>
</div>
<div class="ordlist">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">View Details </button>
<button class="btn btn-primary">Add To Order List</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
<img src="../../../assets/{{items.image}}" height="500px" width="700px" alt="">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
**ts**
export class MenuComponent implements OnInit {
menuItems:any=[
{ 'id':1,'image':'chickenLalima.jpg','alt':'alt','price':200,'dishName':'Chicken Lalima'},
{ 'id':2,'image':'homebiryani.jpg','alt':'alt','price':150,'dishName':'Saamey Biryani'},
{ 'id':3,'image':'muttonLalima.jpg','alt':'alt','price':350,'dishName':'Mutton Lali'},
{ 'id':4,'image':'muttonsaamey.jpg','alt':'alt','price':320,'dishName':'Mutton Saamey'},
]
constructor() { }
ngOnInit(): void {
}
}