Advanced Usage

Structure-side (HTML)

You can use some very cool attributes if you want:

<zxing-scanner
    [scannerEnabled]="scannerEnabled"
    [autofocusEnabled]="autofocusEnabled"
    [device]="selectedDevice"
    [cssClass]="'small-video'"
    (camerasFound)="displayCameras($event)"
    (scanSuccess)="handleQrCodeResult($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).
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.

Logic-side (TypeScript)

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

// <zxing-scanner #scanner></zxing-scanner>

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

export class AppComponent {

   @ViewChild('scanner')
   scanner: ZxingScannerComponent;

   doSomething(): void {
      this.scanner.device = this.getBackCamera();
   }

}