QrScanner will scan for a QRCode from your Web-cam and return its string.
npm install @arsa-dev/ngx-qrbash
$ npm install --save ngx-qr
``typescript
// app.module.ts
import { NgQrScannerModule } from 'ngx-qr';
@NgModule({
// ...
imports: [
// ...
NgQrScannerModule,
],
// ...
})
export class AppModule { }
``html
``typescript
// app.component.ts
import { Component, OnInit, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, AfterViewInit { ngOnInit() {
}
capturedQr(result: string) {
console.log(result);
}
ngAfterViewInit() {
}
}
`#### Translation
Provide the following texts:
`ts
export interface QrScannerTexts {
NotSupportedHTML: string;
DeviceDefaultPrefix: string;
StopCameraText: string;
OpenButtonText: string;
}
``html
(capturedQr)="capturedQr($event)"
[texts]="{
NotSupportedHTML: You are using an outdated browser.,
DeviceDefaultPrefix: Camera,
StopCameraText: Stop Camera,
OpenButtonText: Open QR Code File... }">
`#### Styling
Button styles can be changed:
`html
(capturedQr)="capturedQr($event)"
[buttonClass]="'ngClassForButtons'">
`
#### Upload QR FeatureYou can let users upload a QR code using:
`html
(capturedQr)="capturedQr($event)"
[allowUpload]="true">
`
If you only need upload QR feature, you can use the following:`html
(capturedQr)="capturedQr($event)"
[allowUpload]="true"
[disableScan]="true">
`#### Error handling
Errors are shown on the error output:
`html
(error)="onError($event)"
(capturedQr)="capturedQr($event)">
``