how do i get form model on clicking the add button using angular2

Question

company.html

   

     <section class="main">
      <h1>Company Management</h1>
         <md-card class="mat-card">
           <button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
 
        <md-card-title class="md-title mat-card-title">
          <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 title">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Username</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Email</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Type</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Active</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Action</span>
            </div>
          </div>
          <hr>
        </md-card-title>
        <md-card-content class="md-content mat-card-content">
          <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>Hotel</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>hotel@gmail.com</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span>company</span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <span></span>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
              <button class="iconBtn">
                <i aria-hidden="true" class="fa fa-pencil"></i>
              </button>
              <button class="iconBtn">
                <i aria-hidden="true" class="fa fa-pencil"></i>
              </button>
            </div>
          </div>
          <hr>
        </md-card-content>
      </md-card>
    </section>

    <ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" 
    (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    This is a modal.
  </div>
</ng-template>

company.component.ts

import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { ModalModule } from 'ngx-bootstrap/modal'; 
import { NgModule }  from '@angular/core';
import { Router } from '@angular/router';

@Component({
  templateUrl: './company.html'
})
export class CompanyComponent {

}
export class DemoModalServiceStaticComponent {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) {}

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

@NgModule({
  imports: [ModalModule.forRoot()]
})
export class AppModule{

}

here, i need to display a form(kind of popup box) on clicking the add_button(+) but it is not displaying anything after tapping on that add_button(+) how do i get form model on clicking the add button using angular2 ??? ( Example: i'm expecting like a popup box display after click on the add_button[+] )

Answer 1

Import ElementRef &ViewChild from '@angular/core' if you want to access your #template you simply have to create a viewchild variable :

@ViewChild("template") template: ElementRef;

and then you can access it using this.template which has many value.

Then if you want to access a form into a modal, you can also add a #form to your form and then access this.modal.form