QR Code display as image (ngx-qrcode2)

QR Code display as image :

1. Get ngx-qrcode2 in your project

Run 

npm install ngx-qrcode2 --save

Ensure success by looking in package.json for "ngx-qrcode2"

2. app.module.ts

import { NgxQRCodeModule } from 'ngx-qrcode2';

...

@NgModule({....

  imports: [NgxQRCodeModule],...

3. QR Component - html

<div>

        <div *ngIf="qrCodeValue">

            <br/>

            <h1>QR code scanning</h1>

            <div fxLayoutAlign="space-evenly center">

                <ngx-qrcode *ngIf="qrCodeValue" id="qr-photo"

                            [qrc-element-type]="supportedTypes" [qrc-value]="qrCodeValue">

                </ngx-qrcode>

            </div>

        </div>

</div>

4. QR Component - ts

import {Component, OnInit} from '@angular/core';

@Component({

  selector: 'qr-comp',

  templateUrl: './qr-comp.component.html',

  styleUrls: ['./qr-comp.component.scss']

})

export class QRComponent implements OnInit {

  qrCodeValue = 'qrCodeValueqrCodeValueqrCodeValueqrCodeValueqrCodeValue';

  // QR code

  supportedTypes: 'url' | 'canvas' | 'img' = 'url';

  constructor() {}

  ngOnInit(): void {}

}