Advanced Usage

Structure-side (HTML)

You can use some very cool attributes if you want:

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

Attribute	Default	Description
scannerEnabled	true	Starts and Stops the scanning.
autofocusEnabled	true	Enables or disables the autofocus-feature of the camera.
device		The video-device used for scanning (use one of the devices emitted by camerasFound).
torch experimental		Can turn on/off the device flashlight.
cssClass deprecated		Will be appended to the video-element e.g. for resizing it.
camerasFound		Emits an array of video-devices after view was initialized.
scanSuccess		Emits the result as string, after a valid QR code was scanned.
scanError		Emitted when some error occours during the scan proccess.
scanFailure		Emitted when the scanner couldn't decode any relsult 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')
  scanner: ZxingScannerComponent;

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

Preview element's size

In your CSS, define an extra class and pass it to the component with the cssClass-parameter. CSS might look like this:

/deep/ .small-video {
    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 /deep/ keyword. Since this is not the best way to achieve the desired behavior and /deep/ is deprecated by Angular, the attribute will be removed in the next major version of the component (2.x) and replaced by an ngTemplate solution.