How to pass values from a modal window to an input

Question

There are two components. On one of the components is an input group. Which by clicking on the button opens a modal window with a list of positions.

<div class="form-group form-black">
  <label class="control-label">Position<label style="color:red;">*</label></label>
  <div class="input-group">
    <input type="text" class="form-control" id="positions_id" #positions_id='ngModel' name="positions_id" [(ngModel)]="user.positions_id" required>  
    <span type="submit" class="input-group-addon btn btn-info" (click)="onOpenModule();">Change position</span>
  </div>
</div>

And on the second component is the modal window itself. So when I open this modal window and select the position and then click on the "Apply" button, this post should entered in the input. Here's how to implement the function for the "Apply" button?

html:

  <div class="col-md-12">
      <table class="table table-hover">
        <thead>
          <tr >
            <th ><b>Position</b></th>
          </tr>
        </thead>
        <tbody>
          <tr class="{{selectedPosition == position ? 'active' : ''}}" *ngFor="let position of positions" (click)="updateSelectedPosition(position?.position_id)">
            <td>{{position.name}} </td>
          </tr>
        </tbody>
      </table>
  </div>
  <div class="col-md-12">
      <button type="submit" [disabled]="!selectedPositon?.name" class="btn btn-info pull-right">Apply</button>

  </div>

ts:

import { Component, OnInit } from '@angular/core';
import { DialogRef, ModalComponent } from 'angular2-modal';
import { BSModalContext } from 'angular2-modal/plugins/bootstrap';
import { PositionService} from '../../../../services/position/position.service';
import { Position } from '../../../../models/position.model';
import { AuthService } from '../../../../services/auth/auth.service';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-position-modal',
  templateUrl: './position-modal.component.html',
  styleUrls: ['./position-modal.component.scss'],

})
export class PositionModalComponent  implements ModalComponent<any> {


  positions: Array<Position>;
  selectedPosition = null;


  constructor(
    public dialog: DialogRef<any>,
    public authService: AuthService, 
    private servPosition: PositionService
  ) { 
    this.positions = new Array<Position>();
  }

  ngOnInit() {
    this.loadPositions();
  }

  private loadPositions() {
    this.servPosition.getPositions().subscribe(positions => this.positions = positions);
  }


  updateSelectedPosition(PositionId) {
    this.selectedPosition = this.positions.find(el => {
      return el.position_id === PositionId
    })
  }

}

Answer 1

https://valor-software.com/ngx-bootstrap/#/modals#confirm-window

Use this valor soft for these kind of stuffs, U can do it using common service between your input form group and modal component,but that is a drag.

Check out the above link that will do the job for you as for as i understood.

Answer 2

You can use Subject (from "rxjs") to send data from one component to another. For example. Your create someService in which you declare -

someSubject: Subject<any> = new Subject<any>();

Then, you describe (click) method to Apply button in witch:

this.someService.someSubject.next("<here is the data which you want to send to another component (selectedPosition)>")

At the end in ngOnInit() second (not modal component) you subscribed to this Subject and do with this data what you want:

this.someService.someSubject.subscribe(position => {
            if (position) {
 // here you code with sending from modal window data
            }
        }));

Or you can use BehaviorSubject instead Subject if you want get initial state onInit component.