Launch Bootstrap Modal Dialog on Load in Angular 8

Question

I need to launch a modal dialog on page load of angular 8/ Visual Studio project. It is working fine with the click of button, however I cannot figure out how to make it load on page load. I am using *ngIf but it is not working. I already tried using JQuery but it is not working. Please guide if there's another way to achieve this

Html:

<button type="button" class="btn btn-danger p-1 ml-2" data-toggle="modal" data-target="#myModal">Open Modal</button>
     <!-- Modal -->
      <div class="modal fade" id="myModal" *ngIf="show" role="dialog">
        <div class="modal-dialog">
    
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">GWFO Flash News</h4>
              <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
              <div class="content">
                  msg goes here
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
    
        </div>
      </div>

Component:

  private show = true;
  ngOnInit() {
    this.show = true; 
 }

Answer 1

firstly after adding bootstrap and jquery and put thier scripts and styles files in the angular.json you should install ngbootrap by using the following command

npm install --save @ng-bootstrap/ng-bootstrap

and after that added to the appmodule file like the following

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, NgbModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

and in your component.ts file added the following

import {
  AfterViewInit,
  Component,
  ElementRef,
  OnInit,
  ViewChild,
} from '@angular/core';
import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, AfterViewInit {
  title = 'appBootstrap';
  @ViewChild('mymodal') mymodal: ElementRef | undefined;
  closeResult = '';

  constructor(private modalService: NgbModal) {}
  ngAfterViewInit(): void {
    this.open(this.mymodal);
  }
  ngOnInit(): void {}

  open(content: any) {
    this.modalService
      .open(content, { ariaLabelledBy: 'modal-basic-title' })
      .result.then(
        (result) => {
          this.closeResult = `Closed with: ${result}`;
        },
        (reason) => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }
}

you can see that we simply added the call to the modal to the afterInit function and it will work. and lastly this is the html code for the component

<h1>Modal show on page load Example</h1>

<button class="btn btn-lg btn-outline-primary" (click)="open(mymodal)">Open My Modal</button>

<ng-template #mymodal let-modal>
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Bootstrap Modal</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">×</span>
    </button>
    </div>
    <div class="modal-body">
        This is example from showing modal when the page loaded
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
    </div>
</ng-template>

Last Note : i answered this question by a good help from this blog : https://www.itsolutionstuff.com/post/how-to-use-bootstrap-modal-in-angularexample.html

Answer 2

because of the bootstrap css classname "modal fade":

.fade {
    opacity: 0; // this will always hide the dom
    transition: opacity 0.15s linear 0s;
}

.modal {position: fixed; top: 0px; right: 0px; bottom: 0px;
    left: 0px;
    z-index: 1050;
    display: none; //this will always hide the dom
    overflow: hidden;
    outline: 0px;
}

if you remove the class "modal fade", you can figure out how to make it load on page load with your code.

Answer 3

`<div
class="modal"
tabindex="-1"
role="dialog"
[ngStyle]="{'display':displayStyle}">
<div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title">Your title</h4>
    </div>
    <div class="modal-body">
        <p>Your message</p>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger"
                (click)="closePopup()">
        Close
        </button>
    </div>
    </div>
</div>
</div>
`
Component side code::
`import { Component, OnInit } from "@angular/core";

@Component({
selector: "my-app",
templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
constructor() {this.openPopup()}

ngOnInit() {}

displayStyle = "none";

openPopup() {
    this.displayStyle = "block";
}
closePopup() {
    this.displayStyle = "none";
}
}
`