Ventana emergente simple usando AngularJS

1. Instalación de Dependencias en Angular
2. Instalación de Bootstrap usando npm install bootstrap jquery popper.js en Angular
3. Instalación de Material Angular en Nuestro Proyecto en Angular
4. Error probable que se encuentre al crear una ventana emergente en Angular

La belleza de habilitar la ventana emergente en una página web es una excelente vía para mostrar información breve sobre un elemento.

La ventana emergente también es una forma ideal de dar un aviso sobre la acción, de tal manera que cuando un usuario hace clic en un elemento, aparece una ventana emergente para indicar que la acción está registrada.

Al ser Angular un marco que sirve para numerosos propósitos, tendremos que instalar algunas dependencias antes de que funcione el modal emergente.

Instalación de Dependencias en Angular

Es ideal usar Visual Studio Code para trabajar en proyectos Angular, ya que crea un entorno en el que puede hacer todo en un solo lugar.

Instalación de Bootstrap usando npm install bootstrap jquery popper.js en Angular

Después de crear un nuevo proyecto angular, nos dirigimos a la terminal e instalamos Bootstrap usando npm install bootstrap jquery popper.js.

Después de una instalación exitosa, abrimos la carpeta del proyecto en VS Code, nos dirigimos a angular.json, en architect > build key, hacemos las siguientes adiciones:

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Instalación de Material Angular en Nuestro Proyecto en Angular

El siguiente es instalar Angular Material en nuestro proyecto. El material angular permite agregar una nueva máscara/tema que embellece nuestra página web.

Aún así, dentro de la carpeta del proyecto de la terminal, ejecutamos el siguiente comando, ng add @angular/material, para instalar el material angular.

Se nos dará una lista de máscaras para elegir. Después de seleccionar, simplemente elegimos Sí para las otras opciones.

Ahora que las dependencias se han instalado correctamente, procederemos a realizar la codificación adecuada.

Además de los componentes creados al crear un proyecto, necesitaremos crear componentes adicionales.

Lo haremos yendo a la terminal, en la carpeta del proyecto, y escribiendo ng g component popup en la terminal. Después de la instalación, deberíamos ver componentes adicionales instalados.

Avanzando, nos dirigimos a app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';

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

Tenga en cuenta que hicimos algunas importaciones adicionales arriba, importamos el BrowserAnimationsModule, MatDialogModule y el PopUpComponent, y agregamos el BrowserAnimationsModule, MatDialogModule a la matriz de importaciones.

A continuación, trabajamos en popup.component.html y hacemos algunas entradas:

<h2> Welcome {{firstName}} </h2>

<button class="btn btn-primary">
    Press
</button>

Pasamos ahora al app.component.ts, aquí importamos el MatDialog y el PopUpComponent. Aquí, también introducimos un código que decide qué datos se muestran al hacer clic en un botón.

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-mateiral';

  constructor(private dialogRef : MatDialog){}

  openDialog(){
    this.dialogRef.open(PopUpComponent,{
      data : {
        name : 'Samuel'
      }
    });
  }
}

El app.component.html también recibe algunos códigos menores agregados; diseñamos el botón en el que aparece el mensaje emergente cuando se hace clic en él.

<button class="btn btn-primary" (click)="openDialog()">
  Click to open pop up
</button>

Luego pasamos a pop-up.component.ts y hacemos un poco de codificación. Lo que sucede aquí es que primero importamos Inyectar y MAT_DIALOG_DATA a nuestro componente, y luego usamos estas importaciones juntas para agregar un nombre al mensaje emergente.

import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-pop-up',
  templateUrl: './pop-up.component.html',
  styleUrls: ['./pop-up.component.css']
})
export class PopUpComponent implements OnInit {

  firstName;
  constructor(@Inject(MAT_DIALOG_DATA) public data) {
    this.firstName = data.name
  }

  ngOnInit(): void {
  }
}

Hemos terminado, ejecutamos el proyecto y lo compilamos con éxito.

Error probable que se encuentre al crear una ventana emergente en Angular

En caso de que se encuentre con este error, un argumento de tipo any[] no se puede asignar al parámetro de tipo al intentar ejecutar el proyecto.

Todo lo que tenemos que hacer es dirigirnos a tsconfig.json, agregar este fragmento, *noImplicitAny*: true y cambiar strict: true a strict: false.