Angular 2.0 y Diálogo Modal

Estoy tratando de encontrar algunos ejemplos sobre cómo hacer un diálogo modal de Confirmación en Angular 2.0. He estado usando el cuadro de diálogo Bootstrap para Angular 1.0 y no he podido encontrar ningún ejemplo en la web para Angular 2.0. También verifiqué documentos angulares 2.0 sin suerte.

¿Hay alguna manera de usar el diálogo de Bootstrap con Angular 2.0?

Gracias !

  • Angular 2 y hasta
  • Bootstrap css (se conserva la animación)
  • NO JQuery
  • NO bootstrap.js
  • Admite contenido modal personalizado (al igual que la respuesta aceptada)
  • Soporte recientemente agregado para múltiples modales uno encima del otro .

`

@Component({ selector: 'app-component', template: `   
header
Whatever content you like, form fields, anything
` }) export class AppComponent { } @Component({ selector: 'app-modal', template: ` ` }) export class ModalComponent { public visible = false; public visibleAnimate = false; public show(): void { this.visible = true; setTimeout(() => this.visibleAnimate = true, 100); } public hide(): void { this.visibleAnimate = false; setTimeout(() => this.visible = false, 300); } public onContainerClicked(event: MouseEvent): void { if ((event.target).classList.contains('modal')) { this.hide(); } } }

Para mostrar el fondo , necesitarás algo como este CSS:

 .modal { background: rgba(0,0,0,0.6); } 

El ejemplo ahora permite múltiples modales al mismo tiempo . (vea el método onContainerClicked() ).

Para los usuarios de Bootstrap 4 css , debe realizar 1 cambio menor (porque se actualizó un nombre de clase css desde Bootstrap 3). Esta línea: [ngClass]="{'in': visibleAnimate}" debe cambiarse a: [ngClass]="{'show': visibleAnimate}"

Para demostrar, aquí hay un plunkr

Aquí hay un ejemplo bastante decente de cómo puedes usar el modal de Bootstrap dentro de una aplicación de Angular2 en GitHub .

La esencia de esto es que puedes ajustar la inicialización bootstrap html y jquery en un componente. Creé un componente modal reutilizable que le permite activar un abrir usando una variable de plantilla.

       Hello World!    

Solo necesita instalar el paquete npm y registrar el módulo modal en su módulo de aplicación:

 import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal'; @NgModule({ imports: [Ng2Bs3ModalModule] }) export class MyAppModule {} 

Este es un enfoque simple que no depende de jquery ni de ninguna otra biblioteca, excepto Angular 2. El componente a continuación (errorMessage.ts) se puede usar como una vista secundaria de cualquier otro componente. Es simplemente un modal de arranque que siempre está abierto o mostrado. Su visibilidad se rige por la statement ngIf.

errorMessage.ts

 import { Component } from '@angular/core'; @Component({ selector: 'app-error-message', templateUrl: './app/common/errorMessage.html', }) export class ErrorMessage { private ErrorMsg: string; public ErrorMessageIsVisible: boolean; showErrorMessage(msg: string) { this.ErrorMsg = msg; this.ErrorMessageIsVisible = true; } hideErrorMsg() { this.ErrorMessageIsVisible = false; } } 

errorMessage.html

  

Este es un ejemplo de control parental (se ha omitido algún código no relevante por brevedad):

parent.ts

 import { Component, ViewChild } from '@angular/core'; import { NgForm } from '@angular/common'; import {Router, RouteSegment, OnActivate, ROUTER_DIRECTIVES } from '@angular/router'; import { OnInit } from '@angular/core'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'app-application-detail', templateUrl: './app/permissions/applicationDetail.html', directives: [ROUTER_DIRECTIVES, ErrorMessage] // Note ErrorMessage is a directive }) export class ApplicationDetail implements OnActivate { @ViewChild(ErrorMessage) errorMsg: ErrorMessage; // ErrorMessage is a ViewChild // yada yada onSubmit() { let result = this.permissionsService.SaveApplication(this.Application).subscribe(x => { x.Error = true; x.Message = "This is a dummy error message"; if (x.Error) { this.errorMsg.showErrorMessage(x.Message); } else { this.router.navigate(['/applicationsIndex']); } }); } } 

parent.html

  // your html... 

Yo uso ngx-bootstrap para mi proyecto.

Puedes encontrar la demo aquí

El github está aquí

Cómo utilizar:

  1. Instalar ngx-bootstrap

  2. Importar a su módulo

 // RECOMMENDED (doesn't work with system.js) import { ModalModule } from 'ngx-bootstrap/modal'; // or import { ModalModule } from 'ngx-bootstrap'; @NgModule({ imports: [ModalModule.forRoot(),...] }) export class AppModule(){} 
  1. Modal estático simple
   

Ahora disponible como un paquete de NPM

angular-personalizado-modal


@Stephen continuación de Paul …

  • Angular 2 y arriba Bootstrap css (se conserva la animación)
  • NO JQuery
  • NO bootstrap.js
  • Admite contenido modal personalizado
  • Soporte para múltiples modales uno encima del otro.
  • Modificado
  • Deshabilitar desplazamiento cuando modal está abierto
  • El modal se destruye cuando se navega.
  • Inicialización de contenido ngOnDestroy , que obtiene ngOnDestroy (ed) cuando se ngOnDestroy del modal.
  • Desplazamiento de los padres deshabilitado cuando modal es visible

Inicialización de contenido difuso

¿Por qué?

En algunos casos, es posible que no desee modal mantener su estado después de haber sido cerrado, sino restablecer el estado inicial.

Tema modal original

Pasar el contenido directo a la vista en realidad genera, lo inicializa incluso antes de que el modal lo obtenga. El modal no tiene una forma de eliminar dicho contenido, incluso si se utiliza un contenedor *ngIf .

Solución

ng-template . ng-template no se renderiza hasta que se lo indiquen.

my-component.module.ts

 ... imports: [ ... ModalModule ] 

my-component.ts

          

modal.component.ts

 export class ModalComponent ... { @ContentChild('header') header: TemplateRef; @ContentChild('body') body: TemplateRef; @ContentChild('footer') footer: TemplateRef; ... } 

modal.component.html

 
...

Referencias

Debo decir que no hubiera sido posible sin la excelente documentación oficial y comunitaria de la red. También podría ayudar a algunos de ustedes a comprender mejor cómo funcionan ng-template , *ngTemplateOutlet y @ContentChild .

https://angular.io/api/common/NgTemplateOutlet
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e

Solución completa de copiar y pegar

modal.component.html

  

modal.component.ts

 /** * @Stephen Paul https://stackoverflow.com/a/40144809/2013580 * @zurfyx https://stackoverflow.com/a/46949848/2013580 */ import { Component, OnDestroy, ContentChild, TemplateRef } from '@angular/core'; @Component({ selector: 'app-modal', templateUrl: 'modal.component.html', styleUrls: ['modal.component.scss'], }) export class ModalComponent implements OnDestroy { @ContentChild('header') header: TemplateRef; @ContentChild('body') body: TemplateRef; @ContentChild('footer') footer: TemplateRef; public visible = false; public visibleAnimate = false; ngOnDestroy() { // Prevent modal from not executing its closing actions if the user navigated away (for example, // through a link). this.close(); } open(): void { document.body.style.overflow = 'hidden'; this.visible = true; setTimeout(() => this.visibleAnimate = true, 200); } close(): void { document.body.style.overflow = 'auto'; this.visibleAnimate = false; setTimeout(() => this.visible = false, 100); } onContainerClicked(event: MouseEvent): void { if ((event.target).classList.contains('modal')) { this.close(); } } } 

modal.module.ts

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ModalComponent } from './modal.component'; @NgModule({ imports: [ CommonModule, ], exports: [ModalComponent], declarations: [ModalComponent], providers: [], }) export class ModalModule { } 

Aquí está mi implementación completa del componente modal bootstrap angular2:

Supongo que en su archivo principal index.html (con las tags y ) en la parte inferior de la etiqueta tiene:

    

modal.component.ts:

 import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core'; declare var $: any;// this is very importnant (to work this line: this.modalEl.modal('show')) - don't do this (becouse this owerride jQuery which was changed by bootstrap, included in main html-body template): let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js'); @Component({ selector: 'modal', templateUrl: './modal.html', }) export class Modal implements AfterViewInit { @Input() title:string; @Input() showClose:boolean = true; @Output() onClose: EventEmitter = new EventEmitter(); modalEl = null; id: string = uniqueId('modal_'); constructor(private _rootNode: ElementRef) {} open() { this.modalEl.modal('show'); } close() { this.modalEl.modal('hide'); } closeInternal() { // close modal when click on times button in up-right corner this.onClose.next(null); // emit event this.close(); } ngAfterViewInit() { this.modalEl = $(this._rootNode.nativeElement).find('div.modal'); } has(selector) { return $(this._rootNode.nativeElement).find(selector).length; } } let modal_id: number = 0; export function uniqueId(prefix: string): string { return prefix + ++modal_id; } 

modal.html:

  

Y ejemplo de uso en el componente Editor del cliente: client-edit-component.ts:

 import { Component } from '@angular/core'; import { ClientService } from './client.service'; import { Modal } from '../common'; @Component({ selector: 'client-edit', directives: [ Modal ], templateUrl: './client-edit.html', providers: [ ClientService ] }) export class ClientEdit { _modal = null; constructor(private _ClientService: ClientService) {} bindModal(modal) {this._modal=modal;} open(client) { this._modal.open(); console.log({client}); } close() { this._modal.close(); } } 

client-edit.html:

 {{ bindModal(editModal) }} Som non-standart title Some contents   

Por supuesto title , showClose , y son parámetros / tags opcionales.

Hace poco publiqué sobre esto …

Creé un servicio reutilizable que un componente puede haber inyectado. Una vez inyectado, el componente puede comunicarse con el servicio, ya sea que esté en un estado sucio y vinculado a la navegación del enrutador.

https://long2know.com/2017/01/angular2-menus-navigation-and-dialogs/ https://long2know.com/2017/01/angular2-dialogservice-exploring-bootstrap-part-2/

Compruebe el diálogo de ASUI que se crea en tiempo de ejecución. No hay necesidad de ocultar y mostrar la lógica. Simplemente el servicio creará un componente en tiempo de ejecución utilizando AOT ASUI NPM

intente usar ng-window, permite que el desarrollador abra y controle múltiples ventanas en aplicaciones de una sola página de manera simple, sin Jquery, sin Bootstrap.

enter image description here

Configuración disponible

  • Ventana de Maxmize
  • Minimizar ventana
  • Tamaño personalizado,
  • Posation personalizado
  • la ventana es dragable
  • Bloquear ventana principal o no
  • Centre la ventana o no
  • Pasar valores a la ventana del escudo
  • Pasar los valores de la ventana del escudo a la ventana principal
  • Escuchar cerrar la ventana del recuadro en la ventana principal
  • Escuche el evento de cambio de tamaño con su oyente personalizado
  • Abrir con tamaño máximo o no
  • Activar y desactivar el cambio de tamaño de la ventana
  • Habilitar y deshabilitar la maximización
  • Habilitar y deshabilitar la minimización