Solution 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.

Or else use ng-bootstrap that has better ways of doing this


Running Example

Problem :

<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()">&times;</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">

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';

  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;



Comment posted by Superbia

thanks for your help and now it is closing. however, now when it is closed the grayed out background that modals use is staying there and I have to refresh the page in order to click anything.

Comment posted by Supun De Silva

Here is a

Comment posted by

For the first comment,