{"id":13983101,"url":"https://github.com/mnahkies/ng-qrcode","last_synced_at":"2025-05-05T03:43:55.523Z","repository":{"id":34876276,"uuid":"186112260","full_name":"mnahkies/ng-qrcode","owner":"mnahkies","description":"Easy to use AOT compatible QR code generator for Angular projects.","archived":false,"fork":false,"pushed_at":"2025-05-04T07:21:57.000Z","size":3591,"stargazers_count":56,"open_issues_count":6,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-04T08:28:09.001Z","etag":null,"topics":["angular","angular2","qrcode-generator"],"latest_commit_sha":null,"homepage":"https://mnahkies.github.io/ng-qrcode/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mnahkies.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-05-11T09:19:40.000Z","updated_at":"2025-05-04T07:20:36.000Z","dependencies_parsed_at":"2023-11-20T23:23:33.027Z","dependency_job_id":"cb98f537-99b4-4cdf-a268-d30fd35564a5","html_url":"https://github.com/mnahkies/ng-qrcode","commit_stats":{"total_commits":68,"total_committers":3,"mean_commits":"22.666666666666668","dds":"0.23529411764705888","last_synced_commit":"d131bfecd4f579dfe39eeec8adc192ebe59339d5"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnahkies%2Fng-qrcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnahkies%2Fng-qrcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnahkies%2Fng-qrcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mnahkies%2Fng-qrcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mnahkies","download_url":"https://codeload.github.com/mnahkies/ng-qrcode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252310229,"owners_count":21727509,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","qrcode-generator"],"created_at":"2024-08-09T05:01:38.017Z","updated_at":"2025-05-05T03:43:55.500Z","avatar_url":"https://github.com/mnahkies.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["QR Codes"],"readme":"# Angular QR Code Generator\n\n[![Build Status](https://github.com/mnahkies/ng-qrcode/actions/workflows/ci.yml/badge.svg)](https://github.com/mnahkies/ng-qrcode/actions/workflows/ci.yml?query=branch%3Amaster)\n[![npm](https://img.shields.io/npm/v/ng-qrcode.svg)](https://www.npmjs.com/package/ng-qrcode)\n\nEasy to use QR code generator for Angular projects.\n\n**Features:**\n* Compatible with Angular 19, uses `standalone` components\n* Leverages the widely used [qrcode](https://www.npmjs.com/package/qrcode) \n  package to do the heavy lifting\n* Renders to HTML Canvas\n\n**[Change Log](CHANGES.md)**\n\n\u003c!-- toc --\u003e\n\n  - [Installation](#installation)\n    - [Importing](#importing)\n      - [Standalone Component](#standalone-component)\n      - [NgModule](#ngmodule)\n  - [Usage](#usage)\n    - [Component](#component)\n      - [value: string (required)](#value-string-required)\n      - [size: string | number (optional)](#size-string--number-optional)\n      - [darkColor: RGBAColor (optional)](#darkcolor-rgbacolor-optional)\n      - [lightColor: RGBAColor (optional)](#lightcolor-rgbacolor-optional)\n      - [style: { [klass: string]: any; } (optional)](#style--klass-string-any--optional)\n      - [styleClass: string (optional)](#styleclass-string-optional)\n      - [errorCorrectionLevel: string (optional)](#errorcorrectionlevel-string-optional)\n      - [centerImageSrc: string (optional)](#centerimagesrc-string-optional)\n      - [centerImageSize: string | number (optional)](#centerimagesize-string--number-optional)\n      - [margin: number (optional)](#margin-number-optional)\n    - [Directive](#directive)\n- [Demo](#demo)\n- [Angular compatibility matrix](#angular-compatibility-matrix)\n- [Known / Common Issues](#known--common-issues)\n  - [Reference Error 'global' is not defined](#reference-error-global-is-not-defined)\n- [Footnote / Package History](#footnote--package-history)\n\n\u003c!-- tocstop --\u003e\n\n## Installation\nAdd as a dependency to your angular application:\n\n    npm install ng-qrcode --save\n\n### Importing\nThis library ships with [standalone components](https://angular.dev/reference/migrations/standalone)\n\nHow you consume it depends on whether you have migrated to standalone components (the default since Angular v19)\n\n#### Standalone Component\n\nAdd the `QrCodeComponent` or `QrCodeDirective` to your `@Component` declarations `imports` array. Eg:\n```typescript\nimport { QrCodeComponent } from 'ng-qrcode';\n\n@Component({\n  selector: \"app-root\",\n  templateUrl: \"./app.component.html\",\n  styleUrls: [\"./app.component.scss\"],\n  standalone: true,\n  imports: [\n    QrCodeComponent,\n  ]\n})\nexport class AppComponent {\n  // ...\n}\n```\n#### NgModule\n\nIf you're still using `NgModule` / non-standalone components, then you can add `QrCodeComponent` or `QrCodeDirective` to your `@NgModule` declarations `imports` array. Eg:\n```typescript\nimport { QrCodeComponent } from 'ng-qrcode';\n\n@NgModule({\n  imports: [\n    QrCodeComponent\n  ]\n})\n```\n\nThere is also a deprecated `QrCodeModule` that can be imported.\n\n## Usage\n\n### Component\n```angular17html\n\u003cqr-code value=\"Hello world!\" \n         size=\"300\" \n         errorCorrectionLevel=\"M\" /\u003e\n``` \n\n#### value: string (required)  \nThe value to encode in the QR code, eg: a url\n\n#### size: string | number (optional)\nAn optional size in pixels to render at\n\n**Default:** automatic size based on the value provided (recommended)\n\n#### darkColor: RGBAColor (optional)\nAn RGBA Hex string to use as the color for the dark / filled modules.\nIf an invalid value is passed, the default will be used.\n\n**Default** black (\"#000000FF\")\n\n#### lightColor: RGBAColor (optional)\nAn RGBA Hex string to use as the color for the empty space.\nIf an invalid value is passed, the default will be used.\n\n**Default** white (\"#FFFFFFFF\")\n\n#### style: { [klass: string]: any; } (optional)\nInline style object, passed to the inner canvas element as `[ngStyle]`\n\n#### styleClass: string (optional)\nCSS Class, passed to the inner canvas element\n\n#### errorCorrectionLevel: string (optional)\nControls the amount of redundant information included to make the QR code \nmore likely to scan correctly if it is dirty / damaged\n\n**Default:** \"M\"\n\nValid values: \"L\", \"M\", \"Q\", \"H\" - where \"L\" is the lowest \namount of redundancy, and \"H\" is the highest\n\nSee: https://www.npmjs.com/package/qrcode#error-correction-level for further details\n\n#### centerImageSrc: string (optional)\nA URI suitable to use an a [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) src\nproperty to load and render in the center of the QR code.\n\n**Note:** the image will obscure part of the QR code, and therefore you should err on\nthe side of a higher error correction level, anecdotally when the size is less than 1/4\nof the size of the code, with at least \"M\" error correction, it is generally still scannable.\n\n#### centerImageSize: string | number (optional)\nAn optional size in pixels to render the center image.\n\n**Default:** 60\n\n#### margin: number (optional)\nAn optional amount of margin to be rendered within the canvas element. Defaults to 4,\nwhere the unit is the size of one \"dot\" in the QR code.\n\n### Directive\nIf the provided component is not flexible enough for you, there is also a [directive](projects/ng-qrcode/src/lib/qr-code.directive.ts)\nprovided that is used by the [component](projects/ng-qrcode/src/lib/qr-code.component.ts) under the hood, which provides finer \ngrain control.\n\n# Demo\n**[See running demo here](https://mnahkies.github.io/ng-qrcode/)**  \n\nA demo app is included in the repository under `projects/ng-qrcode-demo` which can be \nrun locally using `ng build \u0026\u0026 ng serve`\n\n# Angular compatibility matrix\nSee table below for a history of versions and their Angular compatibility.\n\nFrom version 16 onwards the library major version will match the Angular \nmajor version.\n\n| Angular Version | ng-qrcode Versions |\n|-----------------|--------------------|\n| ^19             | ^19                |\n| ^18             | ^18                |\n| ^17             | ^17                |\n| ^16             | ^16                |\n| ^15             | ^8                 |\n| ^14             | ^7                 |\n| ^13             | ^6                 |\n| ^12             | ^5                 |\n| ^10 / ^11       | ^4                 |\n| ^7 / ^8         | ^3                 |\n| ^7              | ^2                 |\n\n\n# Known / Common Issues\n\n## Reference Error 'global' is not defined\nEssentially in some cases Angular will bundle a version of the buffer library that is not\ncompatible with web browsers if the 'global' object is not defined.\n\nThis can be easily worked around, see comment here for options:\nhttps://github.com/mnahkies/ng-qrcode/issues/2#issuecomment-563414305\n\n# Footnote / Package History\n\nPre-version 2.0.0 this package was developed by [emin93](https://github.com/emin93) and used the `qrious`\nnpm package to generate the QR Codes.\n\nThe source for this was lost, and this repository is a re-write, first released \nas v2.0.0 that uses the `qrcode` npm package to generate QR Codes.\n\nv2.0.0 should be backwards compatible, aside from a rename of the exported NgModule from \nQRCodeModule -\u003e QrCodeModule for consistency.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmnahkies%2Fng-qrcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmnahkies%2Fng-qrcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmnahkies%2Fng-qrcode/lists"}