Agregar Bootstrap a su aplicación Angular es un proceso fácil. Simplemente escriba el siguiente comando en su Angular CLI. Agregará bootstrap a su carpeta node_modules.
ng add @ng-bootstrap/ng-bootstrap
Enfoque: importe el módulo NgbModal en el archivo TypeScript del componente correspondiente, y luego tenemos que escribir código para el modelo emergente usando el módulo anterior en el archivo HTML del componente correspondiente.
Sintaxis:
- En archivo TypeScript:
import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; - En archivo html:
<ng-template #content let-modal> ... </ng-template>
Ejemplo: modal-basic.ts
import {Component} from '@angular/core';
import {NgbModal, ModalDismissReasons}
from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-basic',
templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
closeResult = '';
constructor(private modalService: NgbModal) {}
open(content) {
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}`;
}
}
}
Ahora, tenemos que usar ng-template para construir el modelo que creará una ventana emergente.
Ejemplo: modal-basic.html
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title"
id="modal-basic-title">
Geeks of Geeks
</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">
<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 click')">
Save
</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary"
(click)="open(content)">
Popup using Angular and Bootstrap
</button>
Producción:
Publicación traducida automáticamente
Artículo escrito por pdbhatt010 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA