Soy un novato en angular.
He usado bootstrap modal usando el paquete ng2-bootstrap .
Mi archivo de vista es
<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"> <h4 class="modal-title pull-left">Area Master</h4> <button type="button" class="close pull-right" (click)="lgModal.hide();" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Modal Content here... </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">Add</button> </div> </div> </div> </div>Necesito saber cómo mostrar/ocultar este modal del componente (tipo de archivo de script).
Escriba el archivo de script es
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import { Router } from '@angular/router'; import { FormGroup, Validators, FormBuilder, FormControl } from '@angular/forms'; import { Area } from './area'; import { AreaService } from './area.service'; @Component({ moduleId: module.id, selector: 'my-areas', templateUrl: './areas.component.html', styleUrls: ['./areas.component.css'] }) export class AreasComponent implements OnInit { area_form: FormGroup; new_area: Area; areas: Area[]; @ViewChild('lgModal') lgModal:ElementRef; constructor( private areaService: AreaService, private router: Router, private form_builder: FormBuilder) { } getAreas(): void { this.areaService .getAreas() .then(areas => this.areas = areas); } submit(area: Area): void { console.log(area); this.areaService.create(area) .then(area => { this.areas.push(area) }) } ngOnInit(): void { this.getAreas(); this.lgModal.show(); this.area_form = this.form_builder.group({ name: ['', Validators.required], pincode: ['', Validators.required], status: ['Active'], type: ['Busines Service Area'] }) } }Su componente modal secundario común será el siguiente
import {Component,Input, ViewChild} from '@angular/core'; import { ModalDirective } from 'ngx-bootstrap'; @Component({ selector: 'common-modal', template: ` <div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title pull-left">{{title}}</h4> <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <ng-content select=".modal-body"> </ng-content> </div> <div class="modal-footer"> <div class="pull-left"> <button class="btn btn-default" (click)="hide()"> Cancel </button> </div> </div> </div> </div> </div> `, }) export class CommonModalComponent { @ViewChild('childModal') public childModal:ModalDirective; @Input() title:string; constructor() { } show(){ this.childModal.show(); } hide(){ this.childModal.hide(); } }El uso del componente secundario en su componente principal se verá como se muestra a continuación
import {Component, ViewChild, NgModule,ViewContainerRef} from '@angular/core' import { BrowserModule } from '@angular/platform-browser'; import { ModalDirective,ModalModule } from 'ngx-bootstrap'; import {CommonModalComponent} from './child.modal'; @Component({ selector: 'my-app', template: ` <button type="button" class="btn btn-primary" (click)="childModal.show()">Open modal</button> <common-modal #childModal [title]="'common modal'"> <div class="modal-body"> Hi heloo </div> </common-modal> `, }) export class AppComponent { @ViewChild('childModal') childModal :CommonModalComponent; constructor(private viewContainerRef: ViewContainerRef) { } }Con el código anterior, puede tener un cuadro de diálogo modal común separado que se puede reutilizar, de modo que su encabezado y pie de página sigan siendo los mismos y pueda usar Content-Projection para cambiar el cuerpo del cuadro de diálogo modal.
La respuesta a continuación se refiere a la última versión de ng-bootstrap
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"> <!-- YOUR FORM DATA --> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-dark" (click)="modal.close()">Save</button> </div> </ng-template>aplicación.módulo.ts
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [ ... ], imports: [ ... NgbModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }Ahora (v1.8.1+) puede hacerlo más fácilmente usando el servicio modal, puede usar plantillas y componentes para crear modales http://valor-software.com/ngx-bootstrap/#/modals#service-section