cordobo / angularx-qrcode Goto Github PK

Trying to install Angular 7.2.2 - failing to due peer dependency issue:

Package "angularx-qrcode" has an incompatible peer dependency to "@angular/core" (requires ">= 5.0.0 <= 7.2.0" (extended), would install "7.2.2").

I have 1.5.1 already installed.

The current dependency is qrcodejs2 which is maintained about 3 years ago. I suggest using node-qrcode package. https://github.com/soldair/node-qrcode

Because it is actively maintained.

It seems that the component is not supported by IE 11 as it ends up crashing my whole app with the error:

SCRIPT1002: Syntax error
vendor.js (159836,20)

That error points to the "class" keyword (not supported by IE11) in the following line:

let QRCodeModule = class QRCodeModule {

Getting this error:
ERROR in Error: Metadata version mismatch for module
node_modules/angularx-qrcode/dist/index.d.ts, found version 4, expected 3, resolving symbol OrderHistoryModule in history.module.ts, resolving symbol OrderHistoryModule in history.module.ts
My angular CLI version is 1.7.4 and my package.json:

{ "name": "n", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.2.4", "@angular/cdk": "2.0.0-beta.12", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", "@angular/material": "2.0.0-beta.12", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "@ng-bootstrap/ng-bootstrap": "^1.0.0", "@ngrx/effects": "^4.0.5", "@ngrx/store": "^4.0.3", "@types/date-fns": "^2.6.0", "angular-calendar": "^0.11.0", "angular2-datatable": "^0.6.0", "angularx-qrcode": "^1.0.2", "core-js": "^2.4.1", "date-fns": "^1.29.0", "mydatepicker": "^2.6.1", "ng-recaptcha": "^3.0.3", "ng2-cookies": "^1.0.12", "ngx-barcode": "^0.2.4", "ngx-loading": "^1.0.9", "ngx-mydatepicker": "^2.4.2", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.4.1", "@angular/compiler-cli": "^4.2.4", "@angular/language-service": "^4.2.4", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.1.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.3.2", "typescript": "^2.7.0-rc" } }

It would be great if a border can be added so its part of the image. That way if the image is saved it can be saved with the white border, which would make it easier to read with QR code readers.

Hi,
is possible to export qrCode as image or pdf?

Thanks

Is it able to remove the background, to get the qr code on a transparent background?

我添加了[hidetitle]="true" 但不能正确的隐藏title

Qrcode is opening with parameters of another qrcode used in app.

In first view I am displaying canvas qrcode:

Then when I open modal I prefer to have svg here:

Then after closing modal, changing route and going back to route with qr code it inherits usesvg option somehow from modal view:

But it should not:

FWIW,
I have created a StackBlitz with your sample app. Feel free to use it/share it. Might help people not have to download/compile/run.

Not sure why I'm getting this? I followed the instructions and set the target to es5.

I'm using an Angular 8 App here's there error I get:

Can't bind to 'qrdata' since it isn't a known property of 'qrcode'. ("


<qrcode [ERROR ->][qrdata]="myAngularxQrCode" [size]="256" [level]="'M'"></qrcode>"): ng:///AppModule/GeneratorComponent.html@3:8
Can't bind to 'size' since it isn't a known property of 'qrcode'. ("


<qrcode [qrdata]="myAngularxQrCode" [ERROR ->][size]="256" [level]="'M'"></qrcode>"): ng:///AppModule/GeneratorComponent.html@3:36
Can't bind to 'level' since it isn't a known property of 'qrcode'. ("


<qrcode [qrdata]="myAngularxQrCode" [size]="256" [ERROR ->][level]="'M'"></qrcode>"): ng:///AppModule/GeneratorComponent.html@3:49
'qrcode' is not a known element:
1. If 'qrcode' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("


[ERROR ->]<qrcode [qrdata]="myAngularxQrCode" [size]="256" [level]="'M'"></qrcode>"): ng:///AppModule/GeneratorComponent.html@3:0
    at syntaxError (compiler.js:2409)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:11957)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:27072)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:27059)
    at compiler.js:27002
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:27002)
    at compiler.js:26912
    at Object.then (compiler.js:2400)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26911)

I am getting the error:

Metadata version mismatch for module ..node_modules/angularx-qrcode/dist/index.d.ts, found version 4, expected 3,
resolving symbol DashboardModule in ../dashboard.module.ts, resolving symbol DashboardModule in ../dashboard.module.ts

my package.json

dependencies": {
        "@angular/animations": "^4.4.6",
        "@angular/cdk": "^2.0.0-beta.12",
        "@angular/cli": "^1.7.4",
        "@angular/common": "^4.4.6",
        "@angular/compiler": "^4.4.6",
        "@angular/compiler-cli": "^4.4.6",
        "@angular/core": "^4.4.6",
        "@angular/router": "^4.4.6",
        "angular-mat-datepicker": "0.0.2",
        "angularx-qrcode": "1.0.3"
}

and dashboard.module.ts

import { QRCodeModule } from 'angularx-qrcode';

@NgModule({
	imports: [
		QRCodeModule
	],

	declarations: [],

	exports: [],

	providers: [],


})

Would be awesome to have support for logos

Is there a update for Angular 7 comming? Because during building my app I get the warning:

npm WARN [email protected] requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.

Hello,

I'm on angular 6 and when I try to use the component qrcode inside a component inside a lazy loaded module I get the error Can't bind to 'qrdata' since it isn't a known property of 'qrcode'

Otherwise the component is working properly when used inside appmodule

The Angular 8.1 release is not supported by the peerDependency settings:

Package "angularx-qrcode" has an incompatible peer dependency to "@angular/common" (requires ">= 5.0.0 < 8.1.0", would install "8.1.2")

Could we set it to ">= 5.0.0 < 9" to not warn for 8.x releases or is there some work for further support to do?

I want to update the color for the qrcode dynamically, as I change the value of the assigned variables.

Below is the html tag I am using to generate qr code in angular
<qrcode #qrTag [qrdata]="valueStr" [level]="'M'" [colorlight]="colorLight" [colordark]="colorDark" [usesvg]="false"></qrcode>

Now, for example, if I change the value of colorDark, the same should be reflected on the QRCode.

Please let me know how to achieve this

when running

ng build --prod

with this set of packages

{
  "name": "create",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "startWithProxy": "ng serve --host 0.0.0.0 --disableHostCheck true --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/material-moment-adapter": "^8.2.3",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ng-bootstrap/ng-bootstrap": "^5.1.4",
    "ajv": "^6.10.2",
    "angularx-qrcode": "^2.1.0",
    "core-js": "^3.6.1",
    "hammerjs": "^2.0.8",
    "moment": "^2.24.0",
    "ngx-color-picker": "^8.2.0",
    "rxjs": "^6.5.4",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.6",
    "@angular/cli": "~8.0.6",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.0.3",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.6",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.4.5"
  }
}

This error happens

ERROR in ./node_modules/angularx-qrcode/fesm5/angularx-qrcode.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
    at isAngularDecoratorMetadataExpression (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:265:35)
    at checkNodeForDecorators (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:77:21)
    at visitNodes (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16514:30)
    at Object.forEachChild (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16740:24)
    at checkNodeForDecorators (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16505:24)
    at Object.forEachChild (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16635:21)
    at checkNodeForDecorators (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16505:24)
    at Object.forEachChild (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16692:24)
    at checkNodeForDecorators (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16505:24)
    at Object.forEachChild (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16703:24)
    at checkNodeForDecorators (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
    at visitNode (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16505:24)
    at Object.forEachChild (/Users/egylis/eclipse-workspace/Formation/NGFormation/create/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16599:21)

I'm trying to use your library and I get this error

Did I miss something??
This is my app.module.ts
`import { QRCodeModule } from 'angularx-qrcode';

registerLocaleData(localeId);

@NgModule({
declarations: [
AppComponent,
LoginComponent,
LogoutComponent,
PageNotFoundComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
NgbModule.forRoot(),
EofficeModule,
AppRoutingModule,
QRCodeModule
],
providers: [
Title,
AuthService,
{
provide: HTTP_INTERCEPTORS,
useClass: MyHttpInterceptor,
multi: true
},
{ provide: LOCALE_ID, useValue: 'id' }
],
bootstrap: [AppComponent],
schemas: [
NO_ERRORS_SCHEMA,
CUSTOM_ELEMENTS_SCHEMA
]
})

export class AppModule {}`

And this is how I call the component in my html
<qrcode [qrdata]="'test'" [size]="256" [level]="'M'"></qrcode>

While using qrcode directive, it gives following error.

PrintBarcodeComponent.html:17 ERROR TypeError: Cannot read property '_android' of undefined at qrcode.js:294 at qrcode.js:469 at qrcode.js:16 at Object../node_modules/qrcodejs2/qrcode.js (qrcode.js:24) at __webpack_require__ (bootstrap:84) at QRCodeComponent.push../node_modules/angularx-qrcode/dist/components/angularx-qrcode/angularx-qrcode.component.js.QRCodeComponent.ngAfterViewInit (angularx-qrcode.component.js:4

The 1.0.1 version depends on Angular 4.0.0. Would you mind updating to 5.0.0? I just tested it with 5.2.1 and it works, but the install process prints:

npm WARN [email protected] requires a peer of @angular/common@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^4.0.0 but none is installed. You must install peer dependencies yourself.

Thank you.

this lib is amazing
i coded all my stuff and everything worked fine till the time i was testing on localhost
so after finishing my code i deployed my app to website and it doesn't work there
and no errors in console

following are my code work space configurations

`Angular CLI: 7.3.9
Node: 8.12.0
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.13.9
@angular-devkit/build-angular 0.13.9
@angular-devkit/build-optimizer 0.13.9
@angular-devkit/build-webpack 0.13.9
@angular-devkit/core 7.3.9
@angular-devkit/schematics 7.3.9
@angular/cli 7.3.9
@angular/fire 5.2.1
@ngtools/webpack 7.3.9
@schematics/angular 7.3.9
@schematics/update 0.13.9
rxjs 6.3.3
typescript 3.2.4
webpack 4.29.0`

I have created an object which would have
data = { "endpoint": https://abc/123?123=123;"abc":https://abc/123 } . I would show it as a string!

On android apps scanners - I see it shows as text only .
On iphone - we see it is considered as a URL and opens in browser.

Error (Cannot read property '_android' of undefined) is returned in /qrcodejs2/qrcode.js:

if (this._android && this._android <= 2.1) {
...
}

While i'm updating the qr value dynamically, it is not updating. It takes old values only what I have initiated.

is this library support decode qr image ?

There is issue about this but it's closed: #15

I would prefer import this module in my lazy module.

Currently it's only possible in AppModule.

Could it be possible

Hi. This is great package. I want to generate url and when anyone scan it, will be open browser with url. I like this package , very helpful and support ssr. Thanks you

ng build -c dev --output-hashing none

ERROR in ./node_modules/angularx-qrcode/fesm5/angularx-qrcode.js
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:265:35)
at checkNodeForDecorators (/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:77:21)
at visitNodes (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16514:30)
at Object.forEachChild (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16740:24)
at checkNodeForDecorators (/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
at visitNode (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16505:24)
at Object.forEachChild (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16635:21)
at checkNodeForDecorators (/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
at visitNode (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16505:24)
at Object.forEachChild (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16692:24)
at checkNodeForDecorators (/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
at visitNode (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16505:24)
at Object.forEachChild (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16703:24)
at checkNodeForDecorators (/node_modules/@angular-devkit/build-optimizer/src/transforms/scrub-file.js:68:31)
at visitNode (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16505:24)
at Object.forEachChild (/node_modules/@angular-devkit/build-optimizer/node_modules/typescript/lib/typescript.js:16599:21)

Aling qrcode center page?

In the documentation, couldn't find the approach to generate a QR to open a URL. I need a QR code that can open a URL directly after scanning.

I am using below colours and every time, colorLight is used for QR code generation and colorDark is used as background-colour

colorLight = #0080b9
colorDark = #ffffff

Why is it behaving in this way? What is the way to fix it and get the colours in an expected manner?

I am using version 1.5.3

Hi,

Very good package !
Have some issues or need help in understanding the correct usage of this package. Not much detailed explanation are given on the options .

When reducing the size to less than 100 , sometimes the scanner is not able to get the required data .
but when i keep the size as 100 or more , I have no issues in getting the text. Anything less than 100 , takes lot of time and nothing returns(sometimes a no is returned) .

My application also will be used on mobile phones. So sometimes the text is not displayed when using the scanner .

My text content is around 200 to 300 chars .

Also the level usage needs to be elaborated , so we can use it accordingly. For now i use the level as L.

Is there any 1 to 1 relation between size and the text data ?
Level usage
When screen size is reduced/compressed , the scanner is not able to get the text and returns just a number .

Upgrade dependencies for Angular 7.1 and release Angular 7.1 Demo App https://github.com/Cordobo/angularx-qrcode-sample-app

I've generated QR Code successfully. But also, I need to check that, Is there any way to check that the generated the QR Code is scanned by any QR code reader

I spent quite a while figuring out where this error came from. So I'm opening this issue in the hopes of it getting indexed by google and helping others who have the same issue.

In my case, the solution was simply to upgrade to version 1.6.4 of this plugin. It worked, even with angular 8.

It's a known issue and you can track the progress here:

#53

Workaround:

Set the target in your tsconfig.json to es5 instead of es2015.

Related issues:

#49
#22

Is there any plan for make it compatible with SSR.

Once I actived SSR, I received :
NodeInvocationException: Prerendering failed because of error: ReferenceError: document is not defined

Hi there,

I open this issue to keep you updated about my ongoing efforts to provide es2015 support for Angular 8+.

Angular 8 changed the default target in tsconfig.json from es5 to es2015, which resulted in a build error when building with ng build (ng serve works as expected).

To follow the efforts, subscribe to this issue, I will update it from time to time.

Update 3: 29/12/2019 (29. Dec. 2019)

Version 2.0.0 is now available

Version 2.0.0 is now available for download and fixes the es5 issue in Angular 8+. A workaround is no longer needed.

TODOS:

• DONE: Update Documentation to reflect the changes
• DONE: Add a step-by-step guide to migrate from 1.x to 2.x
• TBD: Test against angular 9
• TBD: Test against Ivy compiler
• TBD: Update Demo App
• TBD: Install a working demo app

Update 2: 29/12/2019 (29. Dec. 2019)

I finished the transition to the new qrcode library and released a series of 2.0 alpha versions to npm. The code is still WIP, the API is not feature complete and there are a couple of breaking changes due to the underlying lib.

Update 1: 09/02/2019 (2. Sep. 2019)

I'm now working in my spare time for a while on a recursion error in the lib. I push my branch to github when this issue is fixed.

Workaround (no longer needed)

A temporary workaround is to set the target in your tsconfig.json from es2015 to es5:

"target": "es5"

Angular version: 8.1.0

Ivy compiler enabled in tsconfig.json with:

  "angularCompilerOptions": {
    "enableIvy": true
  },

Error reported:

ERROR in Attempted to get members of a non-class: "class QRCodeComponent {
    constructor(el, platformId) {
        this.el = el;
        this.platformId = platformId;
        /** @internal */
        this.allowEmptyString = false;
        this.colordark = '#000000';
        this.colorlight = '#ffffff';
        this.level = 'M';
        this.hidetitle = false;
        this.qrdata = '';
        this.size = 256;
        this.usesvg = false;
        this.isValidQrCodeText = (data) => {
            if (this.allowEmptyString === false) {
                return !(typeof data === 'undefined' || data === '');
            }
            return !(typeof data === 'undefined');
        };
    }
    ngAfterViewInit() {
        if (isPlatformServer(this.platformId)) {
            return;
        }
        if (!QRCode) {
            QRCode = require('qrcodejs2');
        }
        try {
            if (!this.isValidQrCodeText(this.qrdata)) {
                throw new Error('Empty QR Code data');
            }
            this.qrcode = new QRCode(this.el.nativeElement, {
                colorDark: this.colordark,
                colorLight: this.colorlight,
                correctLevel: QRCode.CorrectLevel[this.level.toString()],
                height: this.size,
                text: this.qrdata || ' ',
                useSVG: this.usesvg,
                width: this.size,
            });
        }
        catch (e) {
            console.error('Error generating QR Code: ' + e.message);
        }
    }
    ngOnChanges(changes) {
        if (!this.qrcode) {
            return;
        }
        const qrData = changes['qrdata'];
        if (qrData && this.isValidQrCodeText(qrData.currentValue)) {
            this.qrcode.clear();
            this.qrcode.makeCode(qrData.currentValue);
        }
    }
}"

Use Case:

We are displaying QR Code on website and it is going to be scanned by our mobile app.

Issue:

When user hovers over the QR Code on website it displays the JSON data which we have passed in qrdata which looks bad for our UX

Recommended Solution:

A parameter named hidetitle of type boolean

Current Hack:

Use pointer-events property of css and set it to none.

I have reproduced this on stackblitz.

For example

Hi @Cordobo ! I'm trying to add library to my project. I've installed it and then imported to module where my component lives but I still have template parse errors like this

compiler.js:2430 Uncaught Error: Template parse errors:
Can't bind to 'qrdata' since it isn't a known property of 'qrcode'.

Angular version: 7.2.15

I'm trying to run a script to build my project on a GitLab CI runner....everything worked fine before installing this package. I get the following error when i run

npm install

Error: Patch file found for package qrcodejs2 which is not present at node_modules/qrcodejs2

I'm using the latest version of the package: 1.7.0-beta.5

I am loocking how i can use the attribute usesvg, but I can´t make it work.

Thanks

Is it possible to initially display that the QR Data is empty. I am getting error at the console

Error generating QR Code: Empty QR Code data

ngOnInit() {
this.QrCode = '';
}

<qrcode [qrdata]="QrCode" [size]="256" [level]="'H'">

We loved the old version, because it was possible to output the qr code as svg (and then lossless style it with css).
Since you are using node-qrcode now this should still be possible as far as I can tell.
Are you planing to (re)implement this option?