{"id":13729554,"url":"https://github.com/Cordobo/angularx-qrcode","last_synced_at":"2025-05-08T02:30:25.112Z","repository":{"id":25698420,"uuid":"104652558","full_name":"Cordobo/angularx-qrcode","owner":"Cordobo","description":"A fast and easy-to-use Angular QR Code Generator library with Ivy support","archived":false,"fork":false,"pushed_at":"2024-11-21T23:19:37.000Z","size":7067,"stargazers_count":488,"open_issues_count":7,"forks_count":129,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-05-01T17:12:21.412Z","etag":null,"topics":["angular","angular10","angular11","angular12","angular13","angular14","angular15","angular16","angular17","angular18","angular19","angularx-qrcode","aot-compilation","aot-support","ionic","ivy","qrcode","qrcodejs","ssr"],"latest_commit_sha":null,"homepage":"https://cordobo.github.io/angularx-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/Cordobo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":["cordobo"]}},"created_at":"2017-09-24T14:58:31.000Z","updated_at":"2025-04-29T21:45:38.000Z","dependencies_parsed_at":"2023-12-08T15:10:29.726Z","dependency_job_id":"79b463a4-b08f-4f2a-838f-634f86218568","html_url":"https://github.com/Cordobo/angularx-qrcode","commit_stats":{"total_commits":287,"total_committers":16,"mean_commits":17.9375,"dds":"0.19163763066202089","last_synced_commit":"9eab0cb688049d4cd42e0da2b76826aed64e3dd6"},"previous_names":[],"tags_count":91,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cordobo%2Fangularx-qrcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cordobo%2Fangularx-qrcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cordobo%2Fangularx-qrcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cordobo%2Fangularx-qrcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cordobo","download_url":"https://codeload.github.com/Cordobo/angularx-qrcode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252986511,"owners_count":21836169,"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","angular10","angular11","angular12","angular13","angular14","angular15","angular16","angular17","angular18","angular19","angularx-qrcode","aot-compilation","aot-support","ionic","ivy","qrcode","qrcodejs","ssr"],"created_at":"2024-08-03T02:01:02.278Z","updated_at":"2025-05-08T02:30:25.100Z","avatar_url":"https://github.com/Cordobo.png","language":"TypeScript","readme":"# angularx-qrcode - Angular QR Code Generator\n\n`angularx-qrcode` - a fast and easy-to-use Ivy compatible Ionic and Angular QR Code Generator library\n\n- Compatible with **Angular 19** and **Ionic**\n- Under active development\n- Standalone component support\n- Ivy compiler support, AOT, SSR (Server Side Rendering)\n- Accessibility (a11y) attributes supported (alt, aria-label, title)\n- Support for images\n- Trusted and used by thousands of developers like you\n- Easy to use, [sample web app](#demo-app) included\n\n`angularx-qrcode` is compatible with Ionic 3/4/5/6/7/8 and Angular 4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19+ with support for the Ivy compiler. It is a drop-in replacement for the no-longer-maintained angular component ng2-qrcode and based on node-qrcode.\n\n- [Installation](#installation)\n- [Demo App](#demo-app)\n- [Usage \u0026 Example Implementations](#usage-and-example-implementations)\n- [Available Parameters](#available-parameters)\n- [Contribute](#contribute)\n- [Sponsoring](#sponsoring)\n- [License](#license)\n\n## Installation\n\n**Angular 19 and Ionic with angularx-qrcode 19**\n\n```\nnpm install angularx-qrcode --save\n# Or with yarn\nyarn add angularx-qrcode\n```\n\n**Angular 18 and Ionic with angularx-qrcode 18**\n\n```\nnpm install angularx-qrcode@18.0.2 --save\n# Or with yarn\nyarn add angularx-qrcode@18.0.2\n```\n\n**Angular 17 and Ionic with angularx-qrcode 17**\n\n```\nnpm install angularx-qrcode@17.0.1 --save\n# Or with yarn\nyarn add angularx-qrcode@17.0.1\n```\n\n**All supported angular versions**\n\n| Angular Version | angularx-qrcode Version |\n| --------------- | ----------------------- |\n| ^19             | ^19.0.0                 |\n| ^18             | ^18.0.2                 |\n| ^17             | ^17.0.1                 |\n| ^16             | ^16.0.2                 |\n| ^15             | ^15.0.1                 |\n| ^14             | ^14.0.0                 |\n| ^13             | ^13.0.15                |\n| ^12             | ^12.0.3                 |\n| ^11             | ^11.0.0                 |\n| ^10             | ^10.0.12                |\n| ^9              | ^2.3.7                  |\n| ^8              | ^2.1.4                  |\n| ^5 / ^6 / ^7    | ^1.6.4                  |\n| ^4              | ^1.0.3                  |\n\n# Demo App\n\n**[Working online demo of Angular QR Code Generator](https://cordobo.github.io/angularx-qrcode/)**\n\nThe source for the working angular app is available in [`projects/demo-app`](projects/demo-app).\n\nRun the command:\n\n```\nnpm start\n```\n\nand open the url `http://localhost:4200/` in your browser\n\n# Usage and Example Implementations\n\nThe source for **[a live angularx-qrcode demo app](https://cordobo.github.io/angularx-qrcode/)** and more examples how to implement angularx-qrcode is located in the directory [`projects/demo-app`](projects/demo-app/src/app) of this repository.\n\n### Upgrade angularx-qrcode from angularx-qrcode 18 and earlier\n\nSince Angular 19, the latest version of the angularx-qrcode module is now exported as a standalone component. If you’re upgrading from a version before Angular 19, please replace the import statement with the component’s name since it’s now a standalone component.\n\n\n````\n# OLD - angular 18 and older\n# File: app.module.ts\nimport { QRCodeModule } from 'angularx-qrcode';\n\n# NEW - angular 19 and newer\n// File: app.component.ts\nimport { QRCodeComponent } from 'angularx-qrcode';\n````\nFor more uses with angular 18 and earlier see: [angularx/qrcode as ngModule](https://github.com/Cordobo/angularx-qrcode/tree/18.0.0)\n\n\n###  Import the component and add it to your imports section in your main AppComponent:\n\n\n```\n// For angular 19, see above for angular 18 and older\n// File: app.component.ts\n// other imports...\nimport { QRCodeComponent } from 'angularx-qrcode';\n\n@Component({\n  selector: \"app-root\",\n  imports: [\n    // other component imports...\n    QRCodeComponent,\n  ],\n  templateUrl: \"./app.component.html\",\n  styleUrls: [\"./app.component.css\"],\n})\nexport class AppComponent {\n  // your code\n}\n```\n\n```\n// File: app.component.html\n// all your HTML...\n\n\u003cqrcode [qrdata]=\"'Your data string'\" [width]=\"256\" [errorCorrectionLevel]=\"'M'\"\u003e\u003c/qrcode\u003e\n```\n\n### Generate a QR Code from a string\n\nNow that angular/Ionic know about the new QR Code component,\nlet's invoke it from our template.\nIf we use a simple text-string, we need no additional\ncode in our controller.\n\n```\n\u003cqrcode [qrdata]=\"'Your data string'\" [width]=\"256\" [errorCorrectionLevel]=\"'M'\"\u003e\u003c/qrcode\u003e\n```\n\n### Create a QR Code from a variable in your controller\n\nIn addition to our `\u003cqrcode\u003e`-directive in `app.component.html`,\nlets add two lines of code to our controller `app.component.ts`.\n\n```\n// File: app.component.ts\nexport class QRCodeComponent {\n  public myAngularxQrCode: string = null;\n  constructor () {\n    // assign a value\n    this.myAngularxQrCode = 'Your QR code data string';\n  }\n}\n\n// File: app.component.html\n\u003cqrcode [qrdata]=\"myAngularxQrCode\" [width]=\"256\" [errorCorrectionLevel]=\"'M'\"\u003e\u003c/qrcode\u003e\n```\n\n### Download a QR Code\n\nThe [online demo](https://cordobo.github.io/angularx-qrcode/) contains a [`working sample`](projects/demo-app) how to download the QR Code with a button.\n\n### Getting the QR Code URL\n\nTo download the QR Code, we have to use the `qrCodeURL` attribute\nof the `\u003cqrcode\u003e` which returns a sanitized URL representing the\nlocation of the QR Code.\n\n```\n// File: example.ts\nexport class QRCodeComponent {\n  public myAngularxQrCode: string = \"\";\n  public qrCodeDownloadLink: SafeUrl = \"\";\n\n  constructor () {\n    this.myAngularxQrCode = 'Your QR code data string';\n  }\n\n  onChangeURL(url: SafeUrl) {\n    this.qrCodeDownloadLink = url;\n  }\n}\n\n// File: example.html\n\u003cqrcode (qrCodeURL)=\"onChangeURL($event)\" [qrdata]=\"myAngularxQrCode\" [width]=\"256\" [errorCorrectionLevel]=\"'M'\"\u003e\u003c/qrcode\u003e\n\u003ca [href]=\"qrCodeDownloadLink\" download=\"qrcode\"\u003eDownload\u003c/a\u003e\n```\n\nThe file format obtained by `qrCodeURL` depends directly on the\nelementType of `\u003cqrcode\u003e`. If it's either canvas, url or image,\nit returns an image as `.png`, if it's svg, returns a `.svg` file.\n\n## Available Parameters\n\n| Attribute            | Type                    | Default     | Description                                                    |\n| -------------------- | ----------------------- | ----------- | -------------------------------------------------------------- |\n| allowEmptyString     | Boolean                 | false       | Allow qrdata to be an empty string                             |\n| alt                  | String                  | null        | HTML alt attribute (supported by img, url)                     |\n| ariaLabel            | String                  | null        | HTML aria-label attribute (supported by canvas, img, url)      |\n| colorDark            | String                  | '#000000ff' | RGBA color, color of dark module (foreground)                  |\n| colorLight           | String                  | '#ffffffff' | RGBA color, color of light module (background)                 |\n| cssClass             | String                  | 'qrcode'    | CSS Class                                                      |\n| elementType          | String                  | 'canvas'    | 'canvas', 'svg', 'img', 'url' (alias for 'img')                |\n| errorCorrectionLevel | String                  | 'M'         | QR Correction level ('L', 'M', 'Q', 'H')                       |\n| imageSrc             | String                  | null        | Link to your image                                             |\n| imageHeight          | Number                  | null        | height of your image                                           |\n| imageWidth           | Number                  | null        | width of your image                                            |\n| margin               | Number                  | 4           | Define how much wide the quiet zone should be.                 |\n| qrCodeURL            | EventEmitter\\\u003cSafeUrl\\\u003e |             | Returns the QR Code URL                                        |\n| qrdata               | String                  | ''          | String to encode                                               |\n| scale                | Number                  | 4           | Scale factor. A value of 1 means 1px per modules (black dots). |\n| title                | String                  | null        | HTML title attribute (supported by canvas, img, url)           |\n| version              | Number                  | (auto)      | 1-40                                                           |\n| width                | Number                  | 10          | Height/Width (any value)                                       |\n\n## QR Code capacity\n\nDepending on the amount of data of the **qrdata** to encode, a minimum **width** is required.\n\n## AOT - Ahead Of Time Compilation\n\n`angularx-qrcode` supports AOT Compilation (Ahead-of-Time Compilation) which results in significant faster rendering. An AOT-enabled module is included. Further reading: https://angular.io/guide/aot-compiler\n\n## SSR - Server Side Rendering\n\nAs of version 1.6.0, SSR support is fully implemented, the following workaround is no longer needed. [HowTo use Angular QRCode with SSR](https://github.com/Cordobo/angularx-qrcode/issues/5)\n\n## Contribute\n\n- Please open your PR against the development branch.\n- Make sure your editor uses **prettier** to minimize commited code changes.\n- You cannot contribute but want to support development? Consider a [sponsorship](https://github.com/sponsors/Cordobo).\n\n## Sponsoring\n\nSupport the development of angularx-qrcode (or even see your logo here?), consider [sponsoring angularx-qrcode](https://github.com/sponsors/Cordobo). Your support is much appreciated!\n\n## License\n\nMIT License\n\nCopyright (c) 2018 - present [Andreas Jacob (Cordobo.com)](http://cordobo.com/)\n","funding_links":["https://github.com/sponsors/cordobo","https://github.com/sponsors/Cordobo"],"categories":["UI Components"],"sub_categories":["QR Code"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCordobo%2Fangularx-qrcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCordobo%2Fangularx-qrcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCordobo%2Fangularx-qrcode/lists"}