example - ¿Cómo usar el código para abrir un modal en Angular 2?
modal angular 4 (9)
Aquí está mi implementación completa del componente modal bootstrap angular2:
Supongo que en su archivo index.html principal (con las etiquetas <html> y <body> ) en la parte inferior de la etiqueta <body> tiene:
<script src="assets/js/jquery-2.1.1.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
modal.ponent.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<any> = 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:
<div class="modal inmodal fade" id="{{modal_id}}" tabindex="-1" role="dialog" aria-hidden="true" #thisModal>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" [ngClass]="{''hide'': !(has(''mhead'') || title) }">
<button *ngIf="showClose" type="button" class="close" (click)="closeInternal()"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<ng-content select="mhead"></ng-content>
<h4 *ngIf=''title'' class="modal-title">{{ title }}</h4>
</div>
<div class="modal-body">
<ng-content></ng-content>
</div>
<div class="modal-footer" [ngClass]="{''hide'': !has(''mfoot'') }" >
<ng-content select="mfoot"></ng-content>
</div>
</div>
</div>
</div>
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:
<modal [title]=''"Some standard title"'' [showClose]=''true'' (onClose)="close()" #editModal>{{ bindModal(editModal) }}
<mhead>Som non-standart title</mhead>
Some contents
<mfoot><button calss=''btn'' (click)="close()">Close</button></mfoot>
</modal>
Por supuesto, título, showClose, mhead y mfoot son parámetros opcionales.
Usualmente usamos data-target="#myModal" en el <button> para abrir un modal. En este momento necesito usar códigos para controlar cuándo abrir el modal.
Si uso [hidden] o *ngIf para mostrarlo, necesito eliminar class="modal fade" , de lo contrario, el modal nunca se mostrará. Me gusta esto:
<div [hidden]="hideModal" id="myModal">
Sin embargo, en este caso, después de eliminar class="modal fade" , el modal no se desvanecerá y no tendrá sombra en el fondo. Y lo que es peor, se mostrará en la parte inferior de la pantalla en lugar del centro de la pantalla.
¿Hay una manera de mantener class="modal fade" y usar código para abrirlo?
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
Creo que encontré la forma correcta de hacerlo usando ngx-bootstrap . Primero importa las siguientes clases:
import { ViewChild } from ''@angular/core'';
import { BsModalService, ModalDirective } from ''ngx-bootstrap/modal'';
import { BsModalRef } from ''ngx-bootstrap/modal/bs-modal-ref.service'';
Dentro de la implementación de clase de su componente, agregue una propiedad @ViewCild, una función para abrir el modal y no olvide configurar modalService como una propiedad privada dentro del constructor de la clase de componentes:
@ViewChild(''editSomething'') editSomethingModal : TemplateRef<any>;
...
modalRef: BsModalRef;
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template);
}
...
constructor(
private modalService: BsModalService) { }
La parte ''editSomething'' de la declaración de @ViewChild se refiere al archivo de la plantilla del componente y su implementación de la plantilla modal ( #editSomething ):
...
<ng-template #editSomething>
<div class="modal-header">
<h4 class="modal-title pull-left">Edit ...</h4>
<button type="button" class="close pull-right" aria-label="Close"
(click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
(click)="modalRef.hide()"
>Close</button>
</div>
</ng-template>
Y finalmente, llame al método para abrir el modal donde lo desee, así:
console.log(this.editSomethingModal);
this.openModal( this.editSomethingModal );
this.editSomethingModal es un TemplateRef que podría ser mostrado por ModalService.
Et voila! El modal definido en su archivo de plantilla de componente se muestra mediante una llamada desde la implementación de su clase de componente. En mi caso, utilicé esto para mostrar un modal desde un controlador de eventos.
Esta es una forma que encontré. Puedes agregar un botón oculto:
<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#myModal">Open Modal</button>
Luego use el código para "hacer clic" en el botón para abrir el modal:
document.getElementById("openModalButton").click();
De esta manera se puede mantener el estilo bootstrap del modal y el fundido en animación.
Incluya jQuery como siempre dentro de las etiquetas de script en index.html.
Después de todas las importaciones pero antes de declarar @Component, agregue:
declare var $: any;
Ahora puede utilizar jQuery en cualquier lugar de su código de Angular 2 TypeScript:
$("#myModal").modal(''show'');
Referencia: https://.com/a/38246116/2473022
La forma en que solía hacerlo sin mucha codificación es ... Tengo el botón oculto con el id="employeeRegistered"
En mi archivo .ts import ElementRef from ''@angular/core''
Luego, después de procesar todo en mi método (click) , haga lo siguiente:
this.el.nativeElement.querySelector(''#employeeRegistered'').click();
entonces el modal se muestra como se espera ..
La mejor manera que he encontrado. Ponga #lgModal o algún otro nombre de variable en su modal.
En su opinión:
<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Large modal</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
En tu componente
import {Component, ViewChild, AfterViewInit} from ''@angular/core'';
import {CORE_DIRECTIVES} from ''@angular/common'';
// todo: change to ng2-bootstrap
import {MODAL_DIRECTIVES, BS_VIEW_PROVIDERS} from ''ng2-bootstrap/ng2-bootstrap'';
import {ModalDirective} from ''ng2-bootstrap/ng2-bootstrap'';
@Component({
selector: ''modal-demo'',
directives: [MODAL_DIRECTIVES, CORE_DIRECTIVES],
viewProviders:[BS_VIEW_PROVIDERS],
templateUrl: ''/app/components/modals/modalDemo.component.html''
})
export class ModalDemoComponent implements AfterViewInit{
@ViewChild(''childModal'') public childModal: ModalDirective;
@ViewChild(''lgModal'') public lgModal: ModalDirective;
public showChildModal():void {
this.childModal.show();
}
public hideChildModal():void {
this.childModal.hide();
}
ngAfterViewInit() {
this.lgModal.show();
}
}
La siguiente respuesta es en referencia a la última ng-bootstrap
Instalar
npm install --save @ng-bootstrap/ng-bootstrap
app.module.ts
import {NgbModule} from ''@ng-bootstrap/ng-bootstrap'';
@NgModule({
declarations: [
...
],
imports: [
...
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Controlador de componentes
import { TemplateRef, ViewChild } from ''@angular/core'';
import { NgbModal } from ''@ng-bootstrap/ng-bootstrap'';
@Component({
selector: ''app-app-registration'',
templateUrl: ''./app-registration.component.html'',
styleUrls: [''./app-registration.component.css'']
})
export class AppRegistrationComponent implements OnInit {
@ViewChild(''editModal'') editModal : TemplateRef<any>; // Note: TemplateRef
constructor(private modalService: NgbModal) { }
openModal(){
this.modalService.open(this.editModal);
}
}
Componente HTML
<ng-template #editModal let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Edit Form</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="dateOfBirth">Date of birth</label>
<div class="input-group">
<input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close()">Save</button>
</div>
</ng-template>
Una forma fácil de lograr esto en angular 2 o 4 (suponiendo que está utilizando bootstrap 4 )
Componente.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">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
Componente.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'';
}