Using bootstrap popup modal in Angular 2

Question

is there a way to use popup modal in my angular 2 app without installing known packages like ng2-opd-pop and others?

I've imported bootstrap in my styles.css @import '../../../Content/bootstrap.css';

(Tried ng2-opd-pop and got a ton of errors)

Answer 1

so basically using 3 party UI component sometimes is a big task if you dont imported or you failed some steps while importing them.

if you want to use any 3 party UI component follow their guide or steps exactly they've shown.

if you want to use pop functionality you can go for angular material which is official UI library by Angular itself.

if you want more fancy components to go with you can have look here PrimeNg

if you want your pop or dialog to create by your self just to show information you can add HTML code and you can show and hide div programmatically.

Answer 2

Try this if you have installed bootstrap 4 in your application.

app.component.html

<button type="button" (click)="openModel()">Open Modal</button>

<div #myModel class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
        <h5 class="modal-title ">Title</h5>
        <button type="button" class="close" (click)="closeModel()">
            <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
    </div>
  </div>
</div>

app.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';

@ViewChild('myModal') myModal;

openModel() {
  this.myModal.nativeElement.className = 'modal fade show';
}
closeModel() {
   this.myModal.nativeElement.className = 'modal hide';
}