access data from child modal window to parent component angular

Question

I have data in two tables left and right side if user click a link from parent component there will be modal popup window will open if i select any radio button from the window this has to map with the selected link in the parent after clicking the match button .

Here is my code for parent component html.

div class="row">
            <div style="width: 50%;float:left">
                <table mat-table [dataSource]="countryTableDisplay" >  
                    <!-- Site Number -->
                    <ng-container matColumnDef="site">
                        <th mat-header-cell *matHeaderCellDef > Site </th>
                        <td mat-cell class="mat-cell" *matCellDef="let element"> {{element.siteNumber}}
                        </td>
                    </ng-container>
                    <!-- IBT Details -->
                    <ng-container matColumnDef="ibtInstitutionNamePIName">
                        <th mat-header-cell *matHeaderCellDef > IBT - Institution Name / PI Name </th>
                        <td mat-cell class="mat-cell" *matCellDef="let element"> {{element.ibtInstitutionName}} / {{element.ibtInvestigatorFullName}}                            
                        </td>
                    </ng-container>
                    <ng-container matColumnDef="action">
                        <th mat-header-cell *matHeaderCellDef></th>
                        <td mat-cell class="mat-cell" *matCellDef="let element; let i = index">
                            <a (click)="openDialog(element,i)"><span class="icon"><i class="fas fa-link"></i></span></a>
                        </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="columnsToDisplay;"></tr>
                    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
                </table >
            </div>
            <div style="width: 50%;float:right">
                    <table  mat-table [dataSource]="cTMSTableDisplay">
                        <!--CTMS Details -->
                        <ng-container matColumnDef="ctmsInstitutionNamePIName">
                            <th mat-header-cell *matHeaderCellDef> CTMS - Institution Name / PI Name</th>
                            <td mat-cell class="mat-cell" *matCellDef="let element">
                                <span *ngIf="!ctmsMatch">Match Sites</span>
                                <span *ngIf="ctmsMatch">{{element.ctmsInstitutionName}} / {{element.ctmsInvestigatorFullName}}</span>
                            </td>  
                        </ng-container>
                        <tr mat-header-row *matHeaderRowDef="columnCTMStoDiplay;"></tr>
                        <tr mat-row *matRowDef="let row; columns: columnCTMStoDiplay;"></tr>
                    </table> 
            </div>
        </div>

compontent ts code

        displayTable(bcnumber, selectedValue){ 
      console.log(bcnumber, selectedValue);
      const ibtData = this.dataService.getIbtDetails(this.bcnumber, this.selectedValue).subscribe(response => {  
        console.log(ibtData);
        this.countryTableDisplay = new MatTableDataSource<IbtList>(response);
        console.log(this.countryTableDisplay);
      }); 
      this.unsubscribe.push(ibtData);


      const ctmsData = this.dataService.getCTMSDetails(this.bcnumber, this.selectedValue).subscribe(response => {  
        console.log(ctmsData);
        this.cTMSTableDisplay = new MatTableDataSource<CtmsList>(response);
        this.ctmsDisplay = response;
        console.log(this.ctmsDisplay);
      }); 
      //this.unsubscribe.push(ctmsData);
      }

            openDialog(element,i): void {
    const dialogRef = this.dialog.open(DialogCTMSComponent, {
      data: {cTMSTableDisplay:this.ctmsDisplay, title:element.ibtInstitutionName + ' / ' + element.ibtInvestigatorFullName, result:this.matchList}

    });
    console.log(this.data);
    dialogRef.afterClosed().subscribe(result => {
      this.result[i]= result;
      console.log(this.result[i]);
      // this.result[i] = result;

    });

Child HTML Page

      <h5>IBT-Institution Name / PI Name</h5>
  <span>{{ctmsDisplay.title}}</span>
  <table>
    <tr *ngFor="let column of ctmsDisplay.cTMSTableDisplay">
      <td>
        <input type="radio" name="ctms" (change)="getCtmsValue(column)" value="ctmsList">
      </td>
      <td>
          {{column.ctmsInstitutionName}} / {{column.ctmsInvestigatorFullName}} 
      </td>
    </tr>
  </table>
    </div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" (click)="close()">Close</button>
  <button type="button" class="btn btn-primary" [mat-dialog-close]="ctmsDisplay.result">Match</button>
</div>

Child component ts

    public columnCTMStoDiplay: string[] = ['select','ctmsInstitutionNamePIName'];
  selectRadio: String;
  constructor(private dialogRef: MatDialogRef<MatchSiteComponent>,@Inject(MAT_DIALOG_DATA) public ctmsDisplay:any) {

  }

  ngOnInit() {
    console.log(this.ctmsDisplay.cTMSTableDisplay);
  }

  getCtmsValue(column){
    this.ctmsDisplay.result = column.ctmsInstitutionName + ' / ' + column.ctmsInvestigatorFullName;

  }

  displayParent(){
    this.dialogRef.close();
  }

  close() {
    this.dialogRef.close();
  }

Nader Nader · Accepted Answer · 2020-01-29T00:30:34

If I got you correctly you want to connect the value of radio input to the parent mat-table... you can generate a service with a BehaviorSubject property of type "ctmsList", inject it in both components, then in the parent subscribe to every value passed form the child to parent

transportInfo.service.ts

export class ...
...
private transport = new BehaviorSubject('init Value')
public msg = this.transport.asObservable();
...
newMsg(value: any){
 this.transport.next(value)
}

parent.component.ts

// service injected ...
ngOnInit(){
this.service.msg.subscribe((val :any) => {
  console.log(val);
}

Child.component.ts

// service injected
getCtmsValue(column){
this.service.newMsg(column);
}

access data from child modal window to parent component angular

1 Answers