modal button to display images in angular - html

Question

In my project I want to show images when I click the button. How I can configure the method openModal() on (click) to do this?
The IMG are taken from assets directory, and change based on your code (B1, B2) choice.
<!-- OPERATION -->
<div class="card my-5">
<div class="card-header" style="text-align: center; font-size: 20px;">
<p><strong>Operation</strong></p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<tr *ngFor="let arr of varOperation; index as i">
<td>
Code: {{arr.operation.code}}
- {{arr.operation.description}}
</td>
<button style="margin-left: 20px; float: right;" class="btn btn-primary" (click)="viewCodeOperation(arr.operation.code)" (click)="openModal()">
Go
</button>
</tr>
</div>
</form>
</div>
</div>
<!-- IMAGES -->
<div class="overflow-auto">
<div *ngIf="imgB1">
<img src="assets\images\B1.jpg">
</div>
<div *ngIf="imgB2">
<img src="assets\images\B2.jpg">
</div>
</div>
viewCodeOperation(code: string) {
this.imgB1 = false
this.imgB2 = false
console.log(code)
if(code == "B1"){
this.imgB1 = true
}
else if(code == "B2"){
this.imgB2 = true
}
}
openModal() {
}

Answer 1

You can try using a library like this https://github.com/maximelafarie/ngx-smart-modal one to set up modals in angular.