{"id":13983108,"url":"https://github.com/OriginRing/qrcode.angular","last_synced_at":"2025-07-21T22:32:04.084Z","repository":{"id":65655213,"uuid":"595878226","full_name":"OriginRing/qrcode.angular","owner":"OriginRing","description":"QR Code implementation based on Angular","archived":false,"fork":false,"pushed_at":"2023-11-10T03:52:28.000Z","size":1319,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-26T05:06:23.224Z","etag":null,"topics":["angular","angular-qrcode","ng-qrcode","ngx-qrcode","qrcode","qrcode-angular"],"latest_commit_sha":null,"homepage":"","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/OriginRing.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2023-02-01T01:41:59.000Z","updated_at":"2023-02-16T09:45:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"548c56dd-af2f-4abd-b4a7-b7bfcac9e568","html_url":"https://github.com/OriginRing/qrcode.angular","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":"0.17647058823529416","last_synced_commit":"0e3438fbb2a996730b990668e35157726c0e6603"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OriginRing%2Fqrcode.angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OriginRing%2Fqrcode.angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OriginRing%2Fqrcode.angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OriginRing%2Fqrcode.angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OriginRing","download_url":"https://codeload.github.com/OriginRing/qrcode.angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226974683,"owners_count":17711996,"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","angular-qrcode","ng-qrcode","ngx-qrcode","qrcode","qrcode-angular"],"created_at":"2024-08-09T05:01:38.161Z","updated_at":"2024-11-28T21:31:24.505Z","avatar_url":"https://github.com/OriginRing.png","language":"TypeScript","readme":"# qrcode-angular\n\nA angular component to generate QR codes for rendering to the DOM.\n\n## Introduction\n\n\u003e angular 17 changed to standalone component\n\nSupport canvas and svg two formats\n\nSupport adding QR code logo\n\nAngular version \u003e= 17 [![npm package](https://img.shields.io/badge/npm-latest%20version-%231890ff)](https://www.npmjs.com/package/qrcode-angular)\n\n17 \u003e Angular version \u003e= 14 (npm 1.2.0)\n\n## Installation\n\n```shell\nnpm i qrcode-angular\n```\n\n## Usage\n\n```typescript\nimport { QrcodeComponent } from 'qrcode-angular';\n\n\u003cqrcode value=\"https://angular.io/\"\u003e\u003c/qrcode\u003e\n\u003cqrcode mode='svg' value=\"https://angular.io/\"\u003e\u003c/qrcode\u003e\n\u003cqrcode value=\"https://angular.io/\" icon=\"imgUrl\"\u003e\u003c/qrcode\u003e\n\u003cqrcode value=\"https://angular.io/\" errorLevel=\"H\"\u003e\u003c/qrcode\u003e\n```\n\n- basic\n\n  \u003cimg src=\"https://github.com/OriginRing/qrcode.angular/blob/master/src/assets/image/originring.png\" alt=\"basic\" width=\"100\" height=\"100\"\u003e\n\n- icon\n\n  \u003cimg src=\"https://github.com/OriginRing/qrcode.angular/blob/master/src/assets/image/originring-logo.png\" alt=\"basic\" width=\"100\" height=\"100\"\u003e\n\n- color\n\n  \u003cimg src=\"https://github.com/OriginRing/qrcode.angular/blob/master/src/assets/image/originring-color.png\" alt=\"basic\" width=\"100\" height=\"100\"\u003e\n\n- errorLevel(H)\n\n  \u003cimg src=\"https://github.com/OriginRing/qrcode.angular/blob/master/src/assets/image/originring-level.png\" alt=\"basic\" width=\"100\" height=\"100\"\u003e\n\n## API\n\n| prop         | type                              | default value                     | note                      |\n| ------------ | --------------------------------- |-----------------------------------|---------------------------|\n| `mode`       | `'canvas'｜'svg'`                 | `'canvas'`                        | output mode               |\n| `value`      | `string`                          | -                                 | scanned link              |\n| `color`      | `{ dark: string, light: string }` | `{ dark: '#000', light: '#fff' }` | QR code Color             |\n| `size`       | `number`                          | `160`                             | QR code Size              |\n| `icon`       | `string`                          | -                                 | QR code include logo url  |\n| `iconSize`   | `number`                          | `40`                              | QR code include logo size |\n| `errorLevel` | `'L'｜'M'｜'Q'｜'H'`              | `M`                               | Error Code Level          |\n\n## Notice\n\n### Invalid QR Code\n\n`value` has a conservative upper limit of 738 or fewer strings. If error correction levels are used, the `value` upper limit will be lowered.\n\n### QR Code error correction level\n\nThe ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.\n\nGenerally, the QR code is divided into 4 error correction levels: Level `L` can correct about `7%` errors, Level `M` can correct about `15%` errors, Level `Q` can correct about `25%` errors, and Level `H` can correct about `30%` errors. \n\n\u003e qrcode-angular bundles the [qrcodegen](https://github.com/nayuki/QR-Code-generator/blob/942f4319a6ba913dbc6775d8e665ccf18f401d83/typescript-javascript/qrcodegen.ts), which is available under the [MIT license](https://github.com/nayuki/QR-Code-generator/blob/942f4319a6ba913dbc6775d8e665ccf18f401d83/typescript-javascript/qrcodegen.ts).\n","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOriginRing%2Fqrcode.angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FOriginRing%2Fqrcode.angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FOriginRing%2Fqrcode.angular/lists"}