I've integrated Instascan (https://github.com/schmich/instascan) into my Angular 5 application to enable users to scan QR Codes.
Upon successful scanning, I need to perform certain actions and update the view of my component accordingly.
Within my component, the following code is used to identify the cameras available and initiate the scanning process:
cameras: Array<any> = []
selectedCamera: any
scanner: any
content: string
ngOnInit () {
let vm = this
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
vm.cameras.push(...cameras)
} else {
console.error('No cameras found.')
}
}).catch(function (e) {
console.error(e)
})
}
startScan () {
let vm = this
this.scanner = new Instascan.Scanner({
video: this.videoContainer.nativeElement,
backgroundScan: false,
mirror: false
})
this.scanner.addListener('scan', function (content) {
vm.content = content
})
this.selectedCamera = this.cameras[0]
this.scanner.start(this.selectedCamera)
}
In my template, there is an element that will only appear if 'content' exists. Clicking on it will emit the scanned content to the parent component using an EventEmitter:
<div *ngIf="content" class="btn" (click)="emitContent()">
PROCEED
</div>
The issue arises when changes in 'content' within the 'scan' event callback are not reflected in the view, making the 'PROCEED' button invisible. Strangely, these changes become visible after clicking elsewhere on the screen.
Attempts such as using ChangeDetectorRef.detectChanges() method and binding 'this' in the callback have proven ineffective. How can I resolve this problem?
Thank you!