title: How to implement Modal Dialog in Angular 2 and above
body: <p>I am a newbie to angular.</p>
  
  <p>I have used bootstrap modal using the package <a href="http://valor-software.com/ng2-bootstrap/#/" rel="noreferrer">ng2-bootstrap</a>.</p>
  
  <p>My View file is </p>
  
  <pre><code>&lt;div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title pull-left"&gt;Area Master&lt;/h4&gt;
          &lt;button type="button" class="close pull-right" (click)="lgModal.hide();" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          Modal Content here...
  
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Add&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to know how to show/hide this modal from the component (type script file).</p>
  
  <p>Type script file is</p>
  
  <pre><code>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 =&gt; this.areas = areas);
    }
  
    submit(area: Area): void {
      console.log(area);
      this.areaService.create(area)
        .then(area =&gt; { 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']
      })
    }
  }
  </code></pre>