How to implement Modal Dialog in Angular 2 and abo

问题:

I am a newbie to angular.

I have used bootstrap modal using the package ng2-bootstrap.

My View file is

<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>

I need to know how to show/hide this modal from the component (type script file).

Type script file is

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\']
    })
  }
}

回答1:

Your common child modal component will be as below

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\">&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();
  }
}

Using the child component in your parent component will look as below

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) {
  }

}

Using the above code you can have a separate common modal dialog which can be reused, so that your header & footer remains the same and you can use Content-Projection to use change the body of the modal dialog.

LIVE DEMO

回答2:

Now (v1.8.1+) you can do it easier by using modal service you can use templates and components for creating modals http://valor-software.com/ngx-bootstrap/#/modals#service-section

回答3:

The below answer is in reference to the latest ng-bootstrap

Component Controller

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);
  }

}

Component 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\">&times;</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>

app.module.ts

import {NgbModule} from \'@ng-bootstrap/ng-bootstrap\';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...

    NgbModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }