#31 Rename start-Property

README.MD

@@ -30,6 +30,12 @@ To install this package, run:
 yarn add @zxing/ngx-scanner@latest
 ```
 
+or
+
+```bash
+npm i @zxing/ngx-scanner@latest --save
+```
+
 Then import it into your Angular `AppModule`:
 
 ```typescript
@@ -62,15 +68,15 @@ Once the package is imported, you can use it in your Angular application:
 
 ```html
 <ngx-zxing
-    [start]="camStarted"
+    [scanningActive]="scanningActive"
     [device]="selectedDevice"
     [cssClass]="'small-video'"
     (camerasFound)="displayCameras($event)"
     (scanSuccess)="handleQrCodeResult($event)"
 ></ngx-zxing>
 ```
 
-- `start` can be used to start and stop the scanning (defaults to `false`)
+- `scanningActive` can be used to start and stop the scanning (defaults to `true`)
 - `device` is the video-device used for scanning (use one of the devices emitted by `camerasFound`)
 - `cssClass` this CSS-class name will be appended to the video-element e.g. for resizing it (see below)
 - `camerasFound` will emit an array of video-devices after view was initialized

package.json

@@ -1,7 +1,7 @@
 {
     "$schema": "./node_modules/ng-packagr/package.schema.json",
     "name": "@zxing/ngx-scanner",
-    "version": "1.0.0-dev.f82e1c",
+    "version": "1.0.0-dev.a83b9e",
     "private": false,
     "ngPackage": {
         "lib": {

src/app/app.component.html

@@ -8,10 +8,14 @@
 
 <div [hidden]="!hasCameras">
 
-    <ngx-zxing #scanner class="test-class" start="true" [device]="selectedDevice" (camerasFound)="displayCameras($event)" (scanSuccess)="handleQrCodeResult($event)"></ngx-zxing>
+    <ngx-zxing #scanner class="test-class" [scanningActive]="scanningActive" [device]="selectedDevice" (camerasFound)="displayCameras($event)" (scanSuccess)="handleQrCodeResult($event)"></ngx-zxing>
 
     <h2 *ngIf="!this.selectedDevice">No camera selected.</h2>
 
+    <p>
+        <button (click)="scanningActive=!scanningActive">Toggle Scanning</button>
+    </p>
+
     <p>
         Result:
         <strong>{{ qrResultString }}</strong>

src/app/app.component.ts

@@ -18,6 +18,7 @@ export class AppComponent implements OnInit {
     hasCameras = false;
     qrResultString: string;
     qrResult: Result;
+    scanningActive = true;
 
     availableDevices: MediaDeviceInfo[];
     selectedDevice: MediaDeviceInfo;

src/app/modules/ngx-zxing/ngx-zxing.component.ts

@@ -67,7 +67,7 @@ export class NgxZxingComponent implements AfterViewInit, OnDestroy, OnChanges {
      * Allow start scan or not.
      */
     @Input()
-    start = false;
+    scanningActive = true;
 
     /**
      * The device that should be used to scan things.
@@ -136,8 +136,8 @@ export class NgxZxingComponent implements AfterViewInit, OnDestroy, OnChanges {
      */
     ngOnChanges(changes: SimpleChanges): void {
 
-        if (changes.start) {
-            if (!this.start) {
+        if (changes.scanningActive) {
+            if (!this.scanningActive) {
                 this.resetScan();
             } else if (this.videoInputDevice) {
                 this.scan(this.videoInputDevice.deviceId);
@@ -352,7 +352,7 @@ export class NgxZxingComponent implements AfterViewInit, OnDestroy, OnChanges {
      * @param device The device to be used in the scan.
      */
     startScan(device: MediaDeviceInfo): void {
-        if (this.start && device) {
+        if (this.scanningActive && device) {
             this.scan(device.deviceId);
         }
     }