If I need to update my UI, I can directly pass the data like this:
Using HTML Template
<li *ngFor="let post of posts; let i = index;">
{{i+1}}) {{post.name}}
<button (click)="editCategory(post)" class="btn btn-danger btn-sm">Edit</button>
</li>
Using Component TS
editCategory(post){
post.name = "Something";
}
This method reflects the changes in the UI and works as expected. However, when trying to make changes indirectly, it doesn't work as follows:
Using HTML Template
<li *ngFor="let post of posts; let i = index;">
{{i+1}}) {{post.name}}
<button (click)="deleteCategory(post); modal1.show();" class="btn btn-danger btn-sm">Edit</button>
</li>
<div #modal1="bs-modal">
<button (click)="finallyDeleteCategory(); modal1.show();" class="btn btn-danger btn-sm">Edit</button> //making changes through this button
</div>
Using Component TS
deleteCategory(post){
this.savedPost=post;
}
finallyDeleteCategory(){
this.savedPost.name="deleted"; //this Doesn't work
}
Storing data in a class variable and then making changes to it does not reflect in the UI.
Questions:
- How do I store the reference of the Post in a class variable?
- Is this the correct way to make changes indirectly or should I pass on data in the HTML itself?
Any assistance would be greatly appreciated, thank you!