Angular | Bootstrap - Modal not showing - html

Question

<img id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='assets/barrel.jpg' alt='Text dollar code part one.' />
<div id="myModal" class="modal fade" *ngIf="isModalShowing">
<div class=" modal-lg center">
<div class="modal-header">
<button type="button" class="close" (click)="toggleModal()">×</button>
<div class="modal-content">
<div class="modal-body">
<img id="1" src="assets/barrel.jpg" class="img-responsive">
<img id="2" src="assets/car.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
Above is my html, nothing happens when I click on the image that I am using as my modal trigger. This started when I add the ngIf="isModalShowing" function. Below is my typescript.
import { Component, OnInit, ViewChild } from '#angular/core';
import { NgModule } from '#angular/core';
#Component({
selector: 'app-portfolio',
templateUrl: './portfolio.component.html',
styleUrls: ['./portfolio.component.scss']
})
export class PortfolioComponent implements OnInit {
constructor() { }
public ngOnInit() {
}
isModalShowing: boolean;
toggleModal() {
this.isModalShowing = !this.isModalShowing;
}
}

Answer 1

This might help you as you are using pure bootstrap.
pay attention to [ngClass] in app.component.html file
I added modal-backdrop class to the class list that gives a visual indication of an active modal.
https://stackblitz.com/edit/angular-jggbzx
Or else use ng-bootstrap that has better ways of doing this
Documentation
https://ng-bootstrap.github.io/#/components/modal/examples
Running Example
https://stackblitz.com/edit/angular-dwqv1u