{"id":14973282,"url":"https://github.com/techiediaries/ngx-qrcode","last_synced_at":"2025-05-15T10:01:35.710Z","repository":{"id":21664259,"uuid":"93543983","full_name":"techiediaries/ngx-qrcode","owner":"techiediaries","description":"An Angular 9/10 Component Library for Generating QR (Quick Response) Codes","archived":false,"fork":false,"pushed_at":"2025-03-10T20:23:04.000Z","size":5766,"stargazers_count":193,"open_issues_count":40,"forks_count":62,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-04T18:50:18.532Z","etag":null,"topics":["angular2","angular4","angular6","angular6-library","qrcode","qrcode-generator"],"latest_commit_sha":null,"homepage":"https://techiediaries.com/ngx-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/techiediaries.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","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":"2017-06-06T17:13:19.000Z","updated_at":"2025-03-10T20:23:09.000Z","dependencies_parsed_at":"2025-04-11T16:37:05.206Z","dependency_job_id":"96bde738-f790-4ca9-9db3-6cf8801f247d","html_url":"https://github.com/techiediaries/ngx-qrcode","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techiediaries%2Fngx-qrcode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techiediaries%2Fngx-qrcode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techiediaries%2Fngx-qrcode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techiediaries%2Fngx-qrcode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techiediaries","download_url":"https://codeload.github.com/techiediaries/ngx-qrcode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319715,"owners_count":22051072,"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":["angular2","angular4","angular6","angular6-library","qrcode","qrcode-generator"],"created_at":"2024-09-24T13:48:29.086Z","updated_at":"2025-05-15T10:01:35.352Z","avatar_url":"https://github.com/techiediaries.png","language":"TypeScript","funding_links":[],"categories":["Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"# @techiediaries/ngx-qrcode\n\n```diff\n! ⚠️ WARNING: The NPM package ngx-qrcode2 has been deprecated. Use @techiediaries/ngx-qrcode instead.\n```\n\n`@techiediaries/ngx-qrcode` An Angular Component library for Generating QR (Quick Response ) Codes.\n\nYou can use the `@techiediaries/ngx-qrcode` to easily generate QR codes inside your Angular 6 or Ionic 3 applications \n\n\u003eQR code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to efficiently store data; extensions may also be used. [Source](https://en.wikipedia.org/wiki/QR_code)\n\n\n\u003e Note: Make sure to check [10xdev.space](https://10xdev.space/) for career growth, money making tips and learning paths for developers.\n\n\n## How to install @techiediaries/ngx-qrcode?\n\nTo use ngx-qrcode in your project, install it via npm or yarn:\n\n```bash\n$ npm install @techiediaries/ngx-qrcode --save\nor\n$ yarn add @techiediaries/ngx-qrcode\n```\n\n## How to use @techiediaries/ngx-qrcode?\n\nFor a complete and detailed tutorial on how to use this library. See:\n\n[How to Generate QR Codes In Angular 4+ Applications ](https://www.techiediaries.com/generate-qrcodes-angular)\n\n\nImport `NgxQRCodeModule` from `@techiediaries/ngx-qrcode`  into your `app.module.ts`:\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';\n\nimport { AppComponent } from './app.component';\n\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    NgxQRCodeModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\nOnce the library has been imported, you can use the ngx-qrcode component in your Angular application.\n\nIn `app.component.html`, add:\n```html\n\n\u003cdiv style=\"text-align:center\"\u003e\n  \u003ch1\u003e\n    @techiediaries/ngx-qrcode demo \n  \u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cngx-qrcode \n  [elementType]=\"elementType\" \n  [value]=\"value\"\n  cssClass=\"aclass\"\n  errorCorrectionLevel=\"L\"\u003e\n\u003c/ngx-qrcode\u003e\n\n```\nIn `app.component.ts`, add:\n\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  title = 'app';\n  elementType = 'url';\n  value = 'Techiediaries';\n}\n```\n\n# Contributing\nPlease see [Contributing Guidelines](.github/CONTRIBUTING.md).\n\n## How to develop @techiediaries/ngx-qrcode?\n\nTo generate all `*.js`, `*.d.ts` and `*.metadata.json` files:\n\n```bash\n$ npm run build\nor\n$ yarn build\n\n```\n\nTo lint all `*.ts` files:\n\n```bash\n$ npm run lint\nor\n$ yarn lint\n```\n\n## How to run unit tests?\n\nIn development mode:\n\n```bash\n$ npm run test:watch ngx-qrcode\nor\n$ yarn test:watch ngx-qrcode\n```\nAdd `--codeCoverage` option to see code coverage in `coverage` folder.\n\n## How to publish libraries?\n\n```bash\n$ npm run lib:publish\nor\n$ yarn lib:publish\n```\n\n# Code of Conduct\nPlease see [Code of Conduct](.github/CODE_OF_CONDUCT.md).\n\n## License\n[MIT](/LICENSE) © [Techiediaries](mailto:techiediaries9@gmail.com)\n\n## Troubleshoots\n\nWith Angular CLI 8.X.X you should add this lines to polyfills.ts\n\n```typescript\n// Needed by Buffer needed by QRCode\n// tslint:disable-next-line:no-string-literal\n(window as any)['global'] = window;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechiediaries%2Fngx-qrcode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechiediaries%2Fngx-qrcode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechiediaries%2Fngx-qrcode/lists"}