I want to append/copy selected table row data to another table angular

I want to append/pass data from one table to another table. when a user searches and if there is more than one record the popup will appear and asks the user to select the required rows. I am using angular bootstrap. I tried with jQuery it works for static table and if i use ngfor it won’t work i.e check box is not working for ngfor so jQuery append function not executing. I changed to mat checkbox and the checkbox function works but i coudn’t append or transfer the data to another table. Now i need help to transfer the checked row to another table.

import { Component, OnInit,ViewChild,TemplateRef } from '@angular/core';
import { SearchService } from 'src/app/shared/search.service'
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
import $ from 'jquery'
import * as _angular_ from 'angular';
import { AuditPlan } from '../shared/audit.model';

declare global {
  const angular: typeof _angular_;
}








function convert(str) {
  var date = new Date(str),
    mnth = ("0" + (date.getMonth() + 1)).slice(-2),
    day = ("0" + date.getDate()).slice(-2);
  return [date.getFullYear(), mnth, day].join("-");
}


@Component({
  selector: 'app-view-audit',
  templateUrl: './view-audit.component.html',
  styleUrls: ['./view-audit.component.css']
})




export class ViewAuditComponent implements OnInit {

  page = 1;
  count = 0;
  tableSize = 2;
  @ViewChild("content") modalContent: TemplateRef<any>;
  angular:any;
  selection: any;
  



  constructor(private SearchService: SearchService ,private modalService: NgbModal) { }
  model: any = {};
  audit: any;
  auditType: string;
  auditName: string;
  from: string;
  to: string;
  fromdate: any;
  todate: any;
  data:any;
  closeResult = '';
  result:any;
  content:any;
  datatable:any;
 


  ngOnInit(): void {
    this.showdata();
  
  }



  getCheckbox(checkbox){

       
          //Cache cloned object in a variable
          var clone = $(this).closest("tr").clone();
        
          // $('#scope').empty();
          //Remove checkbox
          // clone.find(':checkbox').remove();
              //Append it
          clone.appendTo("#table1");
          
          this.audit=this.datatable;
      

  }




  openDialog(content) {
  
    
    this.modalService.open(content,  { size: 'xl' ,ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
    
    

  }

 

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }

  onTableDataChange(event) {
    this.page = event;
    this.showdata();
  }


  selectChangeHandler(event: any) {
    this.auditType = event.target.value;
  }

  showdata() {
    this.SearchService.showdata().subscribe((res: any) => {
      this.audit = res;
    //   console.log(this.audit);
    //   if(this.audit.length>=4){
    //      console.log("Sucess");
    //   }
    //   else{
    //     console.log("error");
    //   }
    //    res.forEach((element) => {
    //      var ele= element.Audit_Type;
      

    //     var num = this.audit.reduce(function (n, audit) {
    //        return n + (audit.Audit_Type=='Internal');
    //    }, 0);
      
    //   console.log(num);
    //  });

    })
  }


  searchdata() {

    if (this.auditName == null || this.auditType == null || this.from == null || this.to == null) {
      alert("Please fill all the mandatory fields");
    }
    else{

      this.fromdate = this.from.toString();
      this.todate = this.to.toString();
      let datefrom = convert(this.fromdate);
      let dateto = convert(this.todate);

      this.SearchService.searchdata(this.auditType, this.auditName, datefrom, dateto).subscribe((res: any) => {
        if(res.length>=2){
          this.openDialog(this.modalContent);
          this.datatable = res;
        }
        else{
           
           this.audit = res;
         }


      })
    }


  }

}
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js
<html ng-app="myApp">
<ul class="nav nav-tabs " role="tablist">
    <li class="nav-item">
        <a class="nav-link " data-toggle="tab" [routerLink]="'/createaudit'" role="tab">Create Audit</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active " data-toggle="tab" [routerLink]="'/view'" role="tab">View Audit</a>
    </li>
</ul>

<div class="box">
    <div class="col-xs-12 col-sm-3" style="padding-top: 10px;  ">
        <h2 style="background-color: rgb(243, 243, 243); width: 1300px;">View Audit Plan</h2>
    </div>
    <h5 class="h5">
        *Indicates Mandatory Fields
    </h5>
    <form #addClientForm="ngForm" (ngSubmit)="searchdata()" (ngReset)="showdata()">

        <div class="form-group">
            <div class="container">
                <div class="row">

                    <div class="col">
                        <div class=" form form-group ">
                            <label class="required-field" for="exampleFormControlSelect1">Audit Plan Type</label>
                            <select (change)="selectChangeHandler($event)" class="form-control"
                                id="exampleFormControlSelect1">
                                <option>Choose Plan Type</option>
                                <option value="Internal">Internal</option>
                                <option value="External">External</option>
                                <option value="Client">Client</option>
                                <option value="Vendors">Vendors</option>
                                <option value="Others">Others</option>
                            </select>
                        </div>
                    </div>


                    <div class="col">
                        <div class=" form-group ">
                            <label class="required-field" for="exampleFormControlInput1">Audit Plan Name</label>
                            <input type="text" #AuditName="ngModel" name="AuditName" [(ngModel)]="auditName"
                                class="form-control" id="exampleFormControlInput1" placeholder="Security">
                        </div>
                    </div>

                    <div class="col">
                        <div>
                            <label class="required-field" for="exampleFormControlInput1">Audit From Date</label>
                            <mat-form-field appearance="fill">
                                <mat-label>Choose a date</mat-label>
                                <input matInput [matDatepicker]="picker1" #From="ngModel" name="From"
                                    [(ngModel)]="from">
                                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                                <mat-datepicker #picker1></mat-datepicker>
                            </mat-form-field>
                        </div>
                    </div>


                    <div class="col ">
                        <div class="date">

                            <label class="required-field" for="exampleFormControlInput1">Audit To Date</label>
                            <br>
                            <mat-form-field appearance="fill">
                                <mat-label>Choose a date</mat-label>
                                <input matInput [matDatepicker]="picker2" #To="ngModel" name="To" [(ngModel)]="to">
                                <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                                <mat-datepicker #picker2></mat-datepicker>
                            </mat-form-field>
                        </div>
                    </div>





                    <div class="center">
                        <button type="submit" class="btd1 btn btn-light btn-sm">Search</button>
                        <button type="reset" class="btd btn btn-light btn-sm">Clear</button>
                    </div>

                </div>
            </div>
        </div>
    </form>
    <br>
    <br>
    <br>
    <div class="container">
        <h3>Search Result(s):</h3>
    </div>
    <div class="table1">
        <table class="table table-bordered" id="table1">
            <thead>
                <tr>
                    <th style="display:none" scope="col"></th>
                    <th scope="col">SI No</th>
                    <th scope="col">Audit Name</th>
                    <th scope="col">Audit Type</th>
                    <th scope="col">From Date</th>
                    <th scope="col">To Date</th>
                    <th scope="col">Location</th>
                    <th scope="col">Department</th>
                    <th scope="col">Auditee Name</th>
                    <th scope="col">Auditee Mode</th>
                    <th scope="col">Status</th>
                    <th scope="col">Finding</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody id="scope">

                <tr *ngFor="let audit of audit |  paginate : {
                    itemsPerPage: tableSize,
                    currentPage: page,
                    totalItems: count
                  };
                  let i = index" [class.active]="i == currentIndex">
                    <td style="display:none"></td>
                    <td scope="row">{{audit.Sl_No}}</td>
                    <td><a [routerLink]="'/updateaudit'">{{audit.Audit_Name}}</a></td>
                    <td>{{audit.Audit_Type}}</td>
                    <td>{{audit.From_Date | date:'dd-MM-yyyy'}}</td>
                    <td>{{audit.To_Date | date:'dd-MM-yyyy'}}</td>
                    <td>{{audit.Location}}</td>
                    <td>{{audit.Audit_Area}}</td>
                    <td>{{audit.Auditee_Name}}</td>
                    <td>{{audit.Audit_Mode}}</td>
                    <td>{{audit.Status}}</td>
                    <td>{{audit.Findings}}</td>
                    <td><a [routerLink]="'/updateaudit'">Create New Findings</a></td>
                </tr>
                <tr *ngIf="!audit||audit.length==0">
                    <td colspan="12">
                        No Data Found
                    </td>
                </tr>

            </tbody>
        </table>
        <div class="d-flex justify-content-end">
            <pagination-controls responsive="true" previousLabel="Prev" nextLabel="Next"
                (pageChange)="onTableDataChange($event)">
            </pagination-controls>
        </div>
    </div>
</div>
<br>
<div ng-app="myApp" class=tab>
    <ng-template #content let-modal>
        <div class="container">
            <div class="modal-header">
                <h4 class="modal-title" id="modal-basic-title">Table Update</h4>
                <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="table1">
                <table class="table table-bordered " id="table2" id="table">
                    <thead>
                        <tr>

                            <th scope="col">Select</th>
                            <th scope="col">SI No</th>
                            <th scope="col">Audit Name</th>
                            <th scope="col">Audit Type</th>
                            <th scope="col">From Date</th>
                            <th scope="col">To Date</th>
                            <th scope="col">Location</th>
                            <th scope="col">Department</th>
                            <th scope="col">Auditee Name</th>
                            <th scope="col">Auditee Mode</th>
                            <th scope="col">Status</th>
                            <th scope="col">Finding</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>


                        <tr *ngFor='let audit of datatable'>

                            <td>
                                <mat-checkbox #checkbox (change)="getCheckbox(checkbox)"></mat-checkbox>
                            </td>

                            <td scope="row">{{audit.Sl_No}}</td>
                            <td>{{audit.Audit_Name}}</td>
                            <td>{{audit.Audit_Type}}</td>
                            <td>{{audit.From_Date | date:'dd-MM-yyyy'}}</td>
                            <td>{{audit.To_Date | date:'dd-MM-yyyy'}}</td>
                            <td>{{audit.Location}}</td>
                            <td>{{audit.Audit_Area}}</td>
                            <td>{{audit.Auditee_Name}}</td>
                            <td>{{audit.Audit_Mode}}</td>
                            <td>{{audit.Status}}</td>
                            <td>{{audit.Findings}}</td>
                            <td>Create New Findings</td>

                        </tr>




                    </tbody>
                </table>
            </div>

            <br>
            <br>

            <div class="modal-footer">
                <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">OK</button>
            </div>
        </div>
    </ng-template>
</div>

</html>

the selected row from modal popup should go and sit behind the backside main table

Source: Angular Questions