¿Cómo hacer una ventana emergente modal Bootstrap en Angular 9/8?

En este artículo, veremos cómo usar el componente emergente modal de bootstrap en la aplicación Angular. La adición de bootstrap en nuestro proyecto Angular es un proceso fácil. El cuadro de diálogo modal se puede usar para restringir al usuario a realizar acciones particulares antes de que regrese a su uso normal de la aplicación. Por ejemplo, si el usuario desea acceder a alguna aplicación, debe iniciar sesión en la aplicación antes de poder acceder a toda la aplicación y no queremos dar acceso directo a la aplicación ni a ningún sitio web. Aquí, la ventana emergente/modal puede ser algo útil para restringir y hacer algunos cambios. A medida que crezcamos en este artículo, podremos crear nuestra propia ventana emergente modal.

Si desea utilizar el módulo NgbModal para abrir la ventana emergente con Bootstrap y Angular, consulte ¿Cómo abrir una ventana emergente con Angular y Bootstrap?  
Seguiremos los siguientes pasos para hacer este proyecto.

Paso 1: instale el programa de arranque con el siguiente comando. Para usar el programa de arranque, primero, debemos instalarlo en nuestro espacio de trabajo usando la siguiente sintaxis. El administrador de paquetes del Node nos facilita instalar varios paquetes que necesitamos en nuestro proyecto.

npm install bootstrap

Paso 2: Incluya la siguiente línea en el archivo styles.css. Abra src/styles.cssbootstrap.cssañadiendo la siguiente línea de código. Este método de agregar bootstrap reemplaza el método que generalmente seguimos en Angular 6. Por lo tanto, no usamos estilos angular.json index.html

@import '~bootstrap/dist/css/bootstrap.min.css';

Paso 3: incluya el siguiente código en el archivo app.component.html de la aplicación. Agregue el siguiente código en su archivo app.component.html. Esto nos ayudará a representar el contenido de la clase del componente.

<h3>Please click on the below button open popup</h3>
<hr />
<button
  style="margin: 50px; padding: 10px"
  type="button"
  class="btn btn-primary"
  (click)="openPopup()">Show Data
</button>
<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">GeeksForGeeks</h4>
      </div>
      <div class="modal-body">
        <p>One Stop Solution for all CS problems</p>
  
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" 
                (click)="closePopup()">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Paso 4: incluya el siguiente código en el archivo app.component.ts de la aplicación. Este archivo ts nos ayudará a transferir los datos de la clase de componente para ver la plantilla, es decir, la plantilla HTML.

import { Component, OnInit } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  constructor() {}
  
  ngOnInit() {}
  
  displayStyle = "none";
  
  openPopup() {
    this.displayStyle = "block";
  }
  closePopup() {
    this.displayStyle = "none";
  }
}

Paso 5: Ahora ejecute el siguiente comando para iniciar la aplicación. Este comando comenzará a transpilar el proyecto y mostrará el siguiente resultado.

ng serve --open

Producción: