QR Code display as image - Fix too long qr codes (an-qrcode)

QR Code display as image :

1. Get an-qrcode in your project

Run "npm install an-qrcode --save"

 Ensure success by looking in package.json for an-qrcode

2. app.module.ts

import { AnQrcodeModule } from 'an-qrcode';

..

@NgModule({....

  imports: [AnQrcodeModule],...

3. QR Component - html

<div>
        <div *ngIf="qrCodeValue">
            <br/>
            <h1>QR code scanning</h1>
            <div fxLayoutAlign="space-evenly center">
                 <qrcode *ngIf="qrCodeValue" id="qr-photo"
                        [level]="1"
                        [qrvalue]="qrCodeValue">
                </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 = 'toobigqrCodeValueqrCodeValueqrCodeValueqrCodeValueqrCodeValuetoobigqrCodeValueqrCodeValueqrCodeValueqrCodeValueqrCodeValue';

  // QR code
  supportedTypes: 'url' | 'canvas' | 'img' = 'url';

  constructor() {}

  ngOnInit(): void {}
}