Having trouble generating a modal for every iteration in ngFor. The data passed to the modal seems to be stuck in the first iteration and doesn't change with each iteration. Any ideas on how to solve this?
<div class="container">
<div *ngFor="let note of allNotes.slice().reverse()">
<div class="card">
<div style="padding: 20px;">
<img class="card-img-top" src="../../assets/angular.png">
</div>
<div class="card-body">
<h5 class="card-title">{{note.title}}</h5>
<p class="card-text">{{note.content | summary:300 }}</p>
<button type="button" class="btn btn-info btn-lg" (click)="openModal(note)">Show Details</button>
<!-- Modal Starts -->
<div class="modal" role="dialog" [ngStyle]="{'display':display}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ note.title }}</h4>
<button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
{{ note.content }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="onCloseHandled()">Close</button>
<button type="button" class="btn btn-primary">Delete Note</button>
</div>
</div>
</div>
</div>
<!-- Modal Ends -->
</div>
<div class="card-footer">
{{ note.time | timeAgo }}
</div>
</div>
</div>
</div>
Here is my .ts file for reference:
import { Component, OnInit } from '@angular/core';
import notes from '../notes.data';
@Component({
selector: 'show-notes',
templateUrl: './show-notes.component.html',
styleUrls: ['./show-notes.component.css']
})
export class ShowNotesComponent implements OnInit {
allNotes = notes;
constructor() { }
ngOnInit(): void {
}
display = "none";
openModal() {
this.display = "block";
}
onCloseHandled() {
this.display = "none";
}
}
If you have any suggestions or solutions, I would greatly appreciate your help! Thank you.