angular2-qrcode.ts

import {
    NgModule,
    Component,
    Input,
    Output,
    ElementRef,
    OnChanges,
    SimpleChanges
} from '@angular/core';
import * as qrcode from "qrcode-generator";

@Component({
    moduleId: 'module.id',
    selector: 'qr-code',
    template: ''
})
export class QRCodeComponent implements OnChanges {
    ngOnChanges(changes: SimpleChanges): void {
        if ('data' in changes) {
            this.generate();
        }
    }

    @Input() data: string = '';
    @Input() size: number = 128;
    @Input() type: number = 4;
    @Input() level: string = 'M';

    @Output() isReady: boolean = false;


    constructor(private elementRef: ElementRef) {
    }

    generate() {
        try {
            let qr = qrcode(this.type, this.level);
            qr.addData(this.data);
            qr.make();

            let imgTagString = qr.createImgTag(this.type, 0);
            let el: HTMLElement = this.elementRef.nativeElement;
            el.innerHTML = imgTagString;
            let imgTagObject: HTMLImageElement = <HTMLImageElement> el.firstElementChild;
            imgTagObject.width = this.size;
            imgTagObject.height = this.size;
            
            this.isReady = true;
        } catch (e) {
            console.error(`Could not generate QR Code: ${e.message}`);
        }
    }
}

@NgModule({
    exports: [QRCodeComponent],
    declarations: [QRCodeComponent],
    entryComponents: [QRCodeComponent]
})
export class QRCodeModule {
}