angular - ng2-bootstrap-modal

ng2-bootstrap muestra/oculta modal como componente secundario

Question

Soy un novato en angular.

He usado bootstrap modal usando el paquete ng2-bootstrap .

Mi archivo View 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">&times;</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 (escriba el archivo de script).

El archivo de script de tipo 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'']
})
}
}

Answer 1

Su componente modal infantil común será el siguiente

import {Component,Input, ViewChild} from ''@angular/core'';
import { ModalDirective } from ''ng2-bootstrap/ng2-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">&times;</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 tendrá el siguiente aspecto

import {Component, ViewChild, NgModule,ViewContainerRef} from ''@angular/core''
import { BrowserModule } from ''@angular/platform-browser'';
import { ModalDirective,ModalModule } from ''ng2-bootstrap/ng2-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) {
}
}

Usando el código anterior puede tener un diálogo modal común separado que se puede reutilizar, para que su encabezado y pie de página permanezca igual y puede usar Proyección de contenido para cambiar el cuerpo del cuadro de diálogo modal.

DEMO EN VIVO

Answer 2

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