title: Pass Data from form modal back to modal angular 6
body: <p>I'm having a little trouble. I have a parent component that holds a table with 7 columns. There's a NG-Bootstrap modal pop up in the 6th column that displays a form inside the modal when triggered. </p>
  
  <p>What I want to happen is when the NG-Bootstrap modal get triggered from the table the user will be able to input data and submit the form. Then the form is closed and when the next user click the modal they will be able to view the data the previous use entered in from the next tab that says "View Comments". </p>
  
  <p>Basically the modal is both a form in one tab and a displayer of form data in the other tab. </p>
  
  <p>I have this set up in Angular 6.</p>
  
  <p>Does anyone have a suggestions. Here is my code.</p>
  
  <p>parent.component.html</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-xs-12"&gt;
      &lt;h1&gt;NSX Server UI&lt;/h1&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;&lt;span&gt;Rule Name&lt;/span&gt;&lt;/th&gt;
              &lt;th&gt;&lt;span&gt;Rule Unique ID&lt;/span&gt;&lt;/th&gt;
              &lt;th&gt;&lt;span&gt;Source&lt;/span&gt;&lt;/th&gt;
              &lt;th&gt;&lt;span&gt;Destination&lt;/span&gt;&lt;/th&gt;
              &lt;th&gt;&lt;span&gt;Application/Service&lt;/span&gt;&lt;/th&gt;
              &lt;th&gt;&lt;span&gt;Action&lt;/span&gt;&lt;/th&gt;
              &lt;th&gt;&lt;span&gt;Comments&lt;/span&gt;&lt;/th&gt;
              &lt;th&gt;&lt;span&gt;Last Hit&lt;/span&gt;&lt;/th&gt;
              &lt;th&gt;&lt;span&gt;Comments Viewer&lt;/span&gt;&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let item of data"&gt;
              &lt;td&gt;{{item.last_hit}}&lt;/td&gt;
              &lt;td&gt;{{item.rule_unique_ID}}&lt;/td&gt;
              &lt;td&gt;{{item.source}}&lt;/td&gt;
              &lt;td&gt;{{item.destination}}&lt;/td&gt;
              &lt;td&gt;{{item.application_service}}&lt;/td&gt;
              &lt;td&gt;{{item.action}}&lt;/td&gt;
              &lt;td&gt;
                &lt;button class="btn-prime secondary" (click)="openFormModal()"&gt;Open&lt;/button&gt;&lt;br&gt;
              &lt;/td&gt;
              &lt;td&gt;{{item.last_hit}}&lt;/td&gt;
  
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>parent.component.ts</p>
  
  <pre><code>import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
  import { FormModalComponent } from '../form-modal/form-modal.component';
  import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    selector: 'app-nsx',
    templateUrl: './nsx.component.html',
    styleUrls: ['./nsx.component.scss']
  })
  export class NsxComponent implements OnInit {
    data = [];
  
  
    constructor(private modalService: NgbModal) { }
    ngOnInit() {
      this.data = this.getData();
    }
  
    getData() {
      return [
                {
                "id": 1,
                "rule_name": "Sonsing",
                "rule_unique_ID": "536755292-7",
                "source": "http://xing.com",
                "destination": "Mozilla/6.0 (Windows NT 6.2; WOW64; rv:16.0.1) Gecko/20121011 Firefox/16.0.1",
                "application_service": "Crown Victoria",
                "action": true,
                "last_hit": "12/24/2018",
                "comment": ""
              }, {
              "id": 2,
              "rule_name": "Wrapsafe",
              "rule_unique_ID": "876757883-7",
              "source": "http://hard.com",
              "destination": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/ (KHTML, like Gecko) Chrome/12.0.7",
              "application_service": "Durango",
              "action": true,
              "comment": "",
              "last_hit": "12/24/2017"
  
            }, {
              "id": 3,
              "rule_name": "Stringtough",
              "rule_unique_ID": "192903899-2",
              "source": "http://cut.com",
              "destination": "Chrome/15.0.8 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/ (KHTML, like Gecko)",
              "application_service": "Tracker",
              "action": false,
              "comment": "",
              "last_hit": "07/31/2018"
            }, {
              "id": 4,
              "rule_name": "Matsoft",
              "rule_unique_ID": "848151693-7",
              "source": "http://bing.com",
              "destination": "Mozilla/5.0 (Windows NT 6.2; Win64; x64;) Gecko/20100101 Firefox/20.0",
              "application_service": "Thunderbird",
              "action": false,
              "comment": "",
              "last_hit": "07/08/2018"
            }, {
              "id": 5,
              "rule_name": "Zathin",
              "rule_unique_ID": "153395073-3",
              "source": "http://woo.com",
              "destination": "Mozilla/5.0 (Windows; U; Windows NT 6.1; ja-JP) AppleWebKit/ (KHTML, like Gecko)",
              "application_service": "Thunderbird",
              "action": false,
              "comment": "",
              "last_hit": "08/12/2018"
            }, {
              "id": 6,
              "rule_name": "Zathin",
              "rule_unique_ID": "954376364-X",
              "source": "http://love.com",
              "destination": "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_4; en-gb) AppleWebKit/ (KHTML, like Gecko)",
              "application_service": "Sephia",
              "action": false,
              "comment": "",
              "last_hit": "01/10/2018"
            }
        ];
    }
  
    openFormModal() {
      const modalRef = this.modalService.open(FormModalComponent);
      modalRef.componentInstance.id = this.getData["id"];
      modalRef.result.then((result) =&gt; {
       console.log(result);
      }).catch((error) =&gt; {
        console.log(error);
      });
    }
  }
  </code></pre>
  
  <p>child.component.html</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
    &lt;h4 class="modal-title"&gt;Comment Form&lt;/h4&gt;
    &lt;button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/div&gt;
  &lt;ngb-tabset&gt;
    &lt;ngb-tab title="Simple"&gt;
      &lt;ng-template ngbTabContent&gt;
        &lt;form [formGroup]="myForm" (ngSubmit)="submitForm()"&gt;
            &lt;div class="modal-body"&gt;
              &lt;div class="container"&gt;
                &lt;div class="form-group"&gt;
                  &lt;div class="two-col"&gt;
                    &lt;div class="col1"&gt;
                      &lt;label for="owner"&gt;Application Owner&lt;/label&gt;
                      &lt;input type="text" class="form-control" formControlName="owner" name="owner"/&gt;
                    &lt;/div&gt;
                  &lt;div class="col2"&gt;
                    &lt;label for="reviewer"&gt;Reviewer&lt;/label&gt;
                    &lt;input type="text" class="form-control" formControlName="reviewer" name="reviewer"&gt;
                  &lt;/div&gt;
                 &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;div class="two-col"&gt;
                    &lt;div class="col1"&gt;
                      &lt;label for="comments"&gt;Reviewer Comments&lt;/label&gt;
                      &lt;textarea class="form-control" id="comments" placeholder="Enter comment" name="comment" formControlName="comment"&gt;&lt;/textarea&gt;
                    &lt;/div&gt;
                    &lt;div class="col2"&gt;
                        &lt;label for="date"&gt;Reviewer Date&lt;/label&gt;
                        &lt;input class="form-control" type="date" min="2018-01-01" max="2018-12-31" name="date" formControlName="date"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt; 
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;div class="two-col"&gt;
                    &lt;div class="col1"&gt;
                        &lt;label for="status"&gt;Status&lt;/label&gt;
                        &lt;input class="form-control" type="text" formControlName="status" name="status" [(ngModel)]="status"&gt;
                    &lt;/div&gt;
                    &lt;div class="col2"&gt;
                        &lt;label for="exp_date"&gt;Expiration Date&lt;/label&gt;
                        &lt;input class="form-control" type="date" min="2018-10-01" max="2019-12-31" formControlName="exp_date" name="exp_date"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt; 
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-success" [disabled]="!myForm.valid"&gt;Submit Form&lt;/button&gt;
              &lt;button class="btn btn-light"&gt;Cancel&lt;/button&gt;
            &lt;/div&gt;
        &lt;/form&gt;
      &lt;/ng-template&gt;
    &lt;/ngb-tab&gt;
    &lt;ngb-tab title="View Comments"&gt;
        &lt;ng-template ngbTabContent&gt;
          &lt;div class="container"&gt;
            &lt;div class="modal-body"&gt;
              Where the comments data will appear
              &lt;ul&gt;
                &lt;li *ngFor="let item of data"&gt;{{item.reviewer}}&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ng-template&gt;
      &lt;/ngb-tab&gt;
  &lt;/ngb-tabset&gt;
  </code></pre>
  
  <p>child.component.ts</p>
  
  <pre><code>import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
  import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
  import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
  import {NgbTabsetConfig} from '@ng-bootstrap/ng-bootstrap';
  
  
  @Component({
    selector: 'app-form-modal',
    templateUrl: './form-modal.component.html',
    styleUrls: ['./form-modal.component.scss']
  })
  export class FormModalComponent implements OnInit {
  
    myForm: FormGroup;
    owner:string;
    reviewer:string;
    comment:string;
    date:number;
    status: string;
    exp_date: number;
  
    constructor(public activeModal: NgbActiveModal, private formBuilder: FormBuilder) { 
      this.createForm();
    }
    ngOnInit() {
    }
    private createForm() {
      this.myForm = this.formBuilder.group({
        owner: [this.owner,[]],
        reviewer: [this.reviewer,[]],
        comment: [this.comment,[]], 
        date: [this.date,[]],
        status: [this.status,[]],
        exp_date: [this.exp_date,[]]
      })
    }
    private submitForm() {
  
      //grab the row individually based on id
      // display the comment data to child component
      // repeat
      // console.log(this.myForm.value);
      this.activeModal.close(this.myForm.value);
    }
  
  }
  </code></pre>
  
  <p>Is this possible?</p>
  
  <p>Thank you, </p>