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