ANGULAR SCANNER

Can anyone help me with my project? I have a scanner device that is here. When I scan in angular, the Schoolid does not appear correctly, but when in notepad, it is correct const scannedData = 'StudentNumber:124452'; is my example. Thank you. My Schoolid have qrcode... I'm sorry if I put the whole code it doesn't know what to do and how to fix it

import { Component, Inject, Input } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { LockerApiService } from 'src/app/locker-services/locker-api.service';

@Component({
  selector: 'app-locker-popup-details',
  templateUrl: './locker-popup-details.component.html',
  styleUrls: ['./locker-popup-details.component.scss']
})
export class LockerPopupDetailsComponent {
  lockerInfo: any;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    private lockerApiService: LockerApiService
  ) {
    this.lockerInfo = data.locker; // Update to use lockerInfo instead of locker
  }

  scanQRCode(): void {
    this.lockerApiService.scanQRCode(this.lockerInfo.Id, 'StudentNumber:123456').subscribe((response: any) => {
      console.log('Scanned QR code for locker:', this.lockerInfo.Id);
      this.lockerInfo.status = 'Occupied';
      this.lockerInfo.studentNumber = response.studentNumber;

}, (error: any) => {
      console.error('Error scanning QR code:', error);
    });
  }
}


<div class="record">
  <h2 mat-dialog-title>LOCKER INFORMATION</h2>
  <table class="table">
    <tr>
      <th>Locker Number</th>
      <td>{{ lockerInfo.lockerNumber }}</td>
    </tr>
    <tr>
      <th>Name</th>
      <td>{{ lockerInfo.name }}</td>
    </tr>
    <tr>
      <th>Student Number</th>
      <td>{{ lockerInfo.studentNumber }}</td>
    </tr>
    <tr>
      <th>College Program</th>
      <td>{{ lockerInfo.collegeProgram }}</td>
    </tr>
    <!-- <tr> 
      <th>Year</th>
      <td>{{ lockerInfo.year }}</td>
    </tr> -->
    <tr>
      <th>Gender</th>
      <td>{{ lockerInfo.gender }}</td>
    </tr>
    <tr>
      <th>Status</th>
      <td>{{ lockerInfo.status }}</td>
    </tr>
  </table>
  <button (click)="scanQRCode()">Scan ID QR Code </button>

</div>


  scanQRCode(lockerNumber: number, scannedData: string): Observable<any> {
    console.log('Scanning QR code for locker:', lockerNumber);
    return this.http.post(`${this.apiUrl}/api/locker/${lockerNumber}/scan`, { scannedData });
  }

I try install qrscanner libraries but it not work

If you see some in console, the problem is that you need use ngZone to say Angular some change outside "angular enviroment" (typical when use a event javascript)

constructor(private ngZone:NgZone){}

...
this.lockerApiService.scanQRCode(this.lockerInfo.lockerNumber, scannedData).subscribe((response: any) => {
      if (response && response.scannedData) {
        this.ngZone.run(()=>{
           const scannedDataParts = response.scannedData.split('#');
           const studentNumber = scannedDataParts[1].split(':')[1];
           console.log('Locker information updated:', { id: this.lockerInfo.id, lockerNumber: this.lockerInfo.lockerNumber, studentNumber });
           this.dialogRef.close('scanned'); // Close the dialog with 'scanned' as the result
          })
         } else {
        console.error('Invalid scanned data format:', response);
      }

Else, if your lockerApiService.scanQRCode is a Subject try use ngZone in service

  ngZone.run(()=>{
     this.scanQRCode.next(...your value...)
  })

If in any case you cant not see anything in console it's because it's not working. Update the question adding info about your service