Использование поля ввода для запуска / запуска функции

Question

Я работаю над сканированием приложения на угловой платформе. Я использую библиотеку Quagga для приложения сканирования браузера. Правильно все работает отлично. Я хотел бы добавить еще одну функцию к нему.

1.После сканирования я хотел бы получить результат в поле ввода, которое должно действовать как кнопка для запуска другой функции.

Как мне это сделать?

Это мой код

//barcode scanner

  data: any = {};
  barcode = '';
  configQuagga = {
    inputStream: {
      name: 'Live',
      type: 'LiveStream',
      target: '#inputBarcode',
      constraints: {
        width: { min: 50 },
        height: { min: 50 },
        aspectRatio: { min: 1, max: 25 },
        facingMode: 'environment', // or user
      },
      singleChannel: false // true: only the red color-channel is read
    },
    locator: {
      patchSize: 'small',
      halfSample: true
    },
    locate: true,
    numOfWorkers: 4,
    decoder: {
      readers: ['code_128_reader']
    }
  };
  //scanning part

 startScanner() {
    this.barcode = '';
    this.ref.detectChanges();

    Quagga.onProcessed((result) => this.onProcessed(result));

    Quagga.onDetected((result) => this.logCode(result));

    Quagga.init(this.configQuagga, (err) => {
      if (err) {
        return console.log(err);
      }
      Quagga.start();
      console.log('Barcode: initialization finished. Ready to start');
    });
 }

  private onProcessed(result: any) {
    const drawingCtx = Quagga.canvas.ctx.overlay;
    const drawingCanvas = Quagga.canvas.dom.overlay;

    if (result) {
      if (result.boxes) {
        drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute('width'), 10), parseInt(drawingCanvas.getAttribute('height'), 10));
        result.boxes.filter(function (box) {
          return box !== result.box;
        }).forEach(function (box) {
          Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: 'green', lineWidth: 2 });
        });
      }

      if (result.box) {
        Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: '#00F', lineWidth: 2 });
      }

  if (result.codeResult && result.codeResult.code) {
        Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
      }
    }
  }
  
  private logCode(result) {
    const code = result.codeResult.code;
    if (this.barcode !== code) {
      this.barcode = 'Serial Number : ' + code;
      this.ref.detectChanges();
      console.log(this.barcode);
      Quagga.stop();
    }

  }
}



  

<div class="card-block">
<div class="row">
<div>
    <ngb-alert type="info" [dismissible]="false">
        <strong></strong>
    </ngb-alert>
</div>

<div *ngIf="barcode">
    <ngb-alert type="success" [dismissible]="false">
<button type="button" class="btn btn-warning btn-lg btn-block">  {{ barcode }} </button>
     </ngb-alert>
</div>

<button type="button" class="btn btn-primary btn-lg btn-block" (click)="startScanner()">Scan the code</button>
<button type="button" class="btn btn-primary btn-lg btn-block" (click)="client_wsdl_id()">ID</button>
<span> {{ message }} </span>




<div class="input-group">
<!-- <input type="text" id="inputBarcode" class="form-control" placeholder="zone de vision de la caméra" />-->
<div id="inputBarcode" style="position: static">
  <div id="interactive" class="viewport"></div>
</div>
</div>