I don't think it's a good idea to use bootstrap with just css. If you do absolutely want to do that, you can try this

<link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal text-center show" tabindex="-1" id="withScrollExampleModal" style="display: block">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title fw-normal">Basic dialogue title</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <i class="fa-light fa-circle-xmark"></i>
        </button>
      </div>
      <div class="modal-body f-14">
        <p>Lorem ipsum dolor sit amet consectetur. Enim libero commodo nibh vitae sed laoreet magna dui pharetra.
        </p>
      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Action 1</button>
        <button type="button" class="btn btn-outline-primary rounded-pill">Action 2</button>
      </div>
    </div>
  </div>
</div>

You need to add the show css class on the modal and also set display: block on that div. But without the js, you won't see the transitions, the backdrop or dismiss the model.

Bootstrap suggests using https://ng-bootstrap.github.io/ if you're using it in angular

Try with below code

IN your HTML file

<button type="button" class="btn btn-info btn-lg" (click)="openModal()">click to open</button>
    <div class="modal" tabindex="-1" role="dialog"  [ngStyle]="{'display':display}">
         <div class="modal-dialog" role="document">
               <div class="modal-content">
                     <div class="modal-header">
                           <h4 class="modal-title">Model Title</h4>
                           <button type="button" class="close" aria-label="Close" (click)="onCloseHandled()"><span aria-hidden="true">&times;</span></button>
                         </div>
                <div class="modal-body">
                           <p>Model body text</p>
                         </div>
                     <div class="modal-footer">
                           <button type="button" class="btn btn-default" (click)="onCloseHandled()" >Close</button>
                         </div>
            </div>
             </div>
 </div>

In your TS(component) file

create 2 method

 import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styles:[
    `.modal{background: rgba(0,0,0, .5);`
  ]
})
export class AppComponent implements OnInit {
display = "none";
  ngOnInit() {
   }
openModal() {
    this.display = "block";
  }
  onCloseHandled() {
    this.display = "none";
  }
}

Hope this will help you

let me know if you have any query

thanks

Try this in place of your modal:

<div class="modal fade in" aria-hidden="false" style="display: block;" ng-show="isPopupVisible">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="closePopup()">&times;</button>
         <h3>{{selectedEmail.subject}}</h3>
       </div>
       <div class="modal-body">Body</div>
       <div class="modal-footer">Footer</div>
     </div>
   </div>
 </div>

I strongly suggest you to use angular this for using bootstrap with angular as it has components required for angular and without jquery intervention.

Having said that for your question you should install jquery in your project using

npm install jquery --save

After that you have to include jquery in your project angular-cli under script section

"scripts": [  
          "../node_modules/jquery/dist/jquery.min.js",
//other scripts
      ]

After this in your component you have to declare $ for using jquery functions as

declare var $:any;

And in your template give an id to your modal

 <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="myModal">

And call a function when the button is clicked

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm" (click)="openModal()">Small modal</button>

And in your component define the function as

openModal(){
$('#myModal').modal('show');
}

Hope this helps.Let me know if any issue pops up

In 2021 works perfectly,

install bootstrap with npm install --save bootstrap

in angular.json file set route to bootstrap css and js

in component.ts file

import * as bootstrap from 'bootstrap';

  modalName: bootstrap.Modal | undefined
save(){
    this.testModal?.toggle()
  }
  openModal(element){
    this.testModal = new bootstrap.Modal(element,{} ) 
    this.testModal?.show()
  }

in component.html file

<button class="btn btn-primary" (click)="openModal(testModal)">Add dish</button>
    
<div class="modal" tabindex="-1" #testModal id="testModal"> ...</div>

I managed to figure out my problem and it was simply due to the fact that i hadn't specified a path for my scripts section in angular.json file.

so in the angular.json file you have to scroll down to the the scripts section and including the following path:

"node_modules/bootstrap/dist/js/bootstrap.min.js"

You can use ngx-bootstrap library to do this. After installing the library, follow these steps.

Step1: add the following code to app.module.ts file.

import { ModalModule, BsModalRef } from 'ngx-bootstrap';

@NgModule({
 imports: [ModalModule.forRoot(),...],
 providers: [BsModalRef]
})

Step2: copy the following code and paste to app.commponent.html.

    <button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

<ng-template #template>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        This is a modal.
    </div>
</ng-template>

Step3: and finally the following code copy to app.component.ts.

import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

export class AppComponent {
    modalRef: BsModalRef;
    constructor(private modalService: BsModalService) {}

    openModal(template: TemplateRef<any>) {
        this.modalRef = this.modalService.show(template,{ backdrop: 'static', keyboard: false });
    }
}

Well, after many hours of looking for a solution I found out that yes, Bootstrap version was incompatible with Angular version. I had to use ngx-bootstrap library which worked like a charm. Huge thanks to this post which solved my problem.

So, I've managed to make this work, cobbling together various parts of an answer from here: https://github.com/angular-ui/bootstrap/issues/722. The trick is that, at least currently, angular-ui doesn't support Bootstrap 3.0 out of the box. However, it can be worked around. The HTML needs to be wrapped in a modal-dialog and modal-content, e.g.:

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">blah</div>
<div class="modal-body">blah</div>
<div class="modal-footer">blah</div>
</div>
</div>

Then you also need to add some styles to your CSS:

.modal {
  display: block;
}

.modal-body:before,
  .modal-body:after {
    display: table;
    content: " ";
}

.modal-header:before,
.modal-header:after {
  display: table;
  content: " ";
}

I faced the same problem, the issue was with CSS. When I check the elements of the document, find that the modal elements was created but not showing in the screen. Below css has solved the issue.

   .modal-backdrop.fade
   {
     opacity: 0.5;
   }
   .modal-open .modal
   {
     opacity: 1;
   }

Here's a working plunker based on your own plunk: http://plnkr.co/edit/VDDyDuBoZ30tAk2kQKoc?p=preview

List of changed things:

• In index.html, I added Ctrl.js to the list of loaded scripts.
• In modal.html, removed the script tags surrounding the html. When loading the modal html from an external file, the script tags aren't necessary.

• Finally in script.js made a few changes, ending up with the following:

  angular.module('app', ['ui.bootstrap'])
  .controller('demoController', function($modal) {
    this.message = 'It works!';
  
    var key = 1000;
  
    this.modal = function() {
      var modalInstance = $modal.open({
        controller: 'modalController',
        templateUrl: 'modal.html',
        resolve: {
          key: function() {
            return key;
          }
        }
      });
      modalInstance.result.then(function(optionSelected) {
        if (optionSelected === 'yes') {
          console.log("Yes selected!")
        }
      })
    }
  });
  

Basically, this.modal is the function that's executed when clicking on the Open modal button. In the function, we initialize a variable modalInstance, which is the $modal.open function call. We also handle the modal result inside the this.modal function, not outside of it.