Advanced Usage

Structure-side (HTML)

You can use some very cool attributes if you want:

<zxing-scanner
    [enable]="scannerEnabled"
    [(device)]="desiredDevice"
    [torch]="torch"
    (torchCompatible)="onTorchCompatible($event)"
    (camerasFound)="camerasFoundHandler($event)"
    (camerasNotFound)="camerasNotFoundHandler($event)"
    (scanSuccess)="scanSuccessHandler($event)"
    (scanError)="scanErrorHandler($event)"
    (scanFailure)="scanFailureHandler($event)"
    (scanComplete)="scanCompleteHandler($event)"
></zxing-scanner>

Attribute	Default	Description
enable	true	Starts and Stops the scanning.
autofocusEnabled	true	Not working at the moment, needs ImageCapture API implementation.
device		The video-device used for scanning (use one of the devices emitted by camerasFound), it can be set or emit some value.
torch experimental		Can turn on/off the device flashlight.
torchCompatible experimental		Tells if the device's torch is compatible w/ the scanner.
camerasFound		Emits an array of video-devices after view was initialized.
camerasNotFound		Emits a void event when cameras aren't found.
scanSuccess		Emits the result as string, after a valid QR code was scanned.
scanError		Emitted when some error occurs during the scan process.
scanFailure		Emitted when the scanner couldn't decode any result from the media stream.
scanComplete		Emitted after any scan attempt, no matter what.

Logic-side (TypeScript)

You can reference the component from the template and do awesome things in the script side:

// on the template
// <zxing-scanner #scanner></zxing-scanner>

import { ViewChild } from '@angular/core';

export class AppComponent {

  @ViewChild('scanner', { static: false })
  scanner: ZXingScannerComponent;

  /**
   * Some method.
   */
  doSomething(): void {
    this.scanner.device = this.getBackCamera();
  }
 
  /**
   * Returns the back camera for ya.
   */
  getBackCamera() {
    return theBackCamera;
  }
}

Preview element's size

To customize CSS, please make use of Angular default piercing methods:

:host zxing-scanner::ng-deep <some-element> {
  max-height: 70vh;
  width: 100vw;
  object-fit: contain;
}

Due to view-encapsulation it is required that the CSS-class that is to be used can be 'seen' from inside the scanner-component. In the example this is achieved with the ::ng-deep help.

To learn more about styling Angular components please check: https://angular.io/guide/component-styles