ng-template和ngTemplateOutlet Angular

Question

I have used #something in <ng-template #something></> and then i have to make a call to other functionality using #somethingOther from the TS file basically used #somethingOther for <zxing-scanner></>

when i used [ngTemplateOutlet] outside <ng-template></> it give me same model in 2 places. in pop-up aswell in the page bellow my data.

Can't anyone help me out with the issue. sample Code

<ng-container [ngTemplateOutlet]="modalContent"></ng-container>
<ng-template #modalContent>
    <div class="modal-body bg-gray">
        <div class="row">

        <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="row px-3">

            <div class="tab-content col-9 border-0">

                <div class="scanner-shell" [hidden]="!hasDevices">
                    <zxing-scanner #scanning start="true" (scanSuccess)="handleQrCodeResult($event)"></zxing-scanner>
                </div>

                <div class="form-group">
                    <label class="text-gray">device Code</label>
                    <input type="text" value='{{ qrResultString }}'>
                </div>
                <div class="form-group">
                    <label class="text-gray">device Name</label>
                    <input type="text">

                </div>

                <div class="form-group">
                    <label class="text-gray">Device Type</label>
                </div>
                <div class="custom-control custom-checkbox">
                    <label class="custom-control-label" for="checkboxActive">Active</label>
                </div>
            </div>
    </div>
    <div class="col-12 bg-white text-center py-1">
        <button [disabled]="!form.valid" class="btn btn-success mr-1" type="submit">
            <span *ngIf="!device">Update</span>
            <span *ngIf="device">Add</span>
        </button>
        <button type="button" class="btn btn-danger" 
   (click)="closeModal()">Cancel</button>
    </div>
    </form>
</div>
</div>
  </ng-template>

Answer 1

I got a solution to this problem. all i have done is put a hidden div out of ng-template that give all the needed property to the Ts file for the scanning Id inside the template. and then used it inside where i wanted to use.

using templateoutletModal was putting it in two places.

<div class='d-none'>
<div class="scanner-shell" [hidden]="!hasDevices">
    <zxing-scanner #scanning start="true" (scanSuccess)="handleQrCodeResult($event)"></zxing-scanner>
</div>
</div>
<ng-template #modalContent>
    <div class="modal-body bg-gray">
        <div class="row">

        <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="row px-3">

            <div class="tab-content col-9 border-0">

                <div class="scanner-shell" [hidden]="!hasDevices">
                    <zxing-scanner #scanning start="true" (scanSuccess)="handleQrCodeResult($event)"></zxing-scanner>
                </div>

                <div class="form-group">
                    <label class="text-gray">device Code</label>
                    <input type="text" value='{{ qrResultString }}'>
                </div>
                <div class="form-group">
                    <label class="text-gray">device Name</label>
                    <input type="text">

                </div>

                <div class="form-group">
                    <label class="text-gray">Device Type</label>
                </div>
                <div class="custom-control custom-checkbox">
                    <label class="custom-control-label" for="checkboxActive">Active</label>
                </div>
            </div>
    </div>
    <div class="col-12 bg-white text-center py-1">
        <button [disabled]="!form.valid" class="btn btn-success mr-1" type="submit">
            <span *ngIf="!device">Update</span>
            <span *ngIf="device">Add</span>
        </button>
        <button type="button" class="btn btn-danger" (click)="closeModal()">Cancel</button>
    </div>
    </form>
</div>