{"id":15573012,"url":"https://github.com/id1945/ngx-qrcode-styling","last_synced_at":"2025-04-09T23:20:08.012Z","repository":{"id":171714858,"uuid":"648270996","full_name":"id1945/ngx-qrcode-styling","owner":"id1945","description":"This library is built for the purpose generating QR codes with a logo and styling.","archived":false,"fork":false,"pushed_at":"2025-03-02T02:20:18.000Z","size":7142,"stargazers_count":24,"open_issues_count":5,"forks_count":9,"subscribers_count":2,"default_branch":"angular-16","last_synced_at":"2025-03-27T17:47:07.475Z","etag":null,"topics":["angular","angular16","frame","frame-qrcode","qr","qrcode","qrcode-canvas","qrcode-gen","qrcode-generation","qrcode-generator","qrcode-svg","style","styling","svg"],"latest_commit_sha":null,"homepage":"https://id1945.github.io/ngx-qrcode-styling","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/id1945.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-06-01T15:26:15.000Z","updated_at":"2025-03-14T15:26:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"1a95b353-e2b0-4776-a8f1-46c25a0b5f55","html_url":"https://github.com/id1945/ngx-qrcode-styling","commit_stats":{"total_commits":7,"total_committers":2,"mean_commits":3.5,"dds":0.1428571428571429,"last_synced_commit":"daa28156c7dfaa14b10ba8f12f1706c3c9d207c6"},"previous_names":["id1945/ngx-qrcode-styling"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-qrcode-styling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-qrcode-styling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-qrcode-styling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/id1945%2Fngx-qrcode-styling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/id1945","download_url":"https://codeload.github.com/id1945/ngx-qrcode-styling/tar.gz/refs/heads/angular-16","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247645349,"owners_count":20972456,"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","angular16","frame","frame-qrcode","qr","qrcode","qrcode-canvas","qrcode-gen","qrcode-generation","qrcode-generator","qrcode-svg","style","styling","svg"],"created_at":"2024-10-02T18:09:50.365Z","updated_at":"2025-04-09T23:20:07.972Z","avatar_url":"https://github.com/id1945.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-qrcode-styling\n\nThis library is built for the purpose generating QR codes with a logo and styling. \\\nDemo on the [Github](https://id1945.github.io/ngx-qrcode-styling) or [Stackblitz](https://stackblitz.com/edit/angular-ngx-qrcode-styling) or [Codesandbox](https://codesandbox.io/s/ngx-qrcode-styling-vlvvi) \\\nGenerating styled QRcodes [Online](https://qr-code-styling.com/)\n\n![frames](https://raw.githubusercontent.com/id1945/ngx-qrcode-styling/master/ngx-qrcode-styling-frames-01.png)\n![frames](https://raw.githubusercontent.com/id1945/ngx-qrcode-styling/master/ngx-qrcode-styling-frames-02.png)\n![frames](https://raw.githubusercontent.com/id1945/ngx-qrcode-styling/master/ngx-qrcode-styling-frames-03.png)\n![frames](https://raw.githubusercontent.com/id1945/ngx-qrcode-styling/master/ngx-qrcode-styling-frames-04.png)\n![frames](https://raw.githubusercontent.com/id1945/ngx-qrcode-styling/master/ngx-qrcode-styling-frames-05.png)\n\n## Installation\nInstall `ngx-qrcode-styling` from `npm`:\n```bash\nnpm install ngx-qrcode-styling@\u003cversion\u003e --save\n```\n\nAdd wanted package to NgModule imports:\n```typescript\nimport { NgxQrcodeStylingModule } from 'ngx-qrcode-styling';\n\n@NgModule({\n    imports: [\n        NgxQrcodeStylingModule\n    ]\n})\n```\n\nAdd component to your page:\n```typescript\nimport { Options } from 'ngx-qrcode-styling';\n\nexport class AppComponent {\n  public config: Options = {\n    width: 300,\n    height: 300,\n    data: \"https://www.facebook.com/\",\n    image: \"https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg\",\n    margin: 5,\n    dotsOptions: {\n      color: \"#1977f3\",\n      type: \"dots\"\n    },\n    backgroundOptions: {\n      color: \"#ffffff\",\n    },\n    imageOptions: {\n      crossOrigin: \"anonymous\",\n      margin: 0\n    }\n  };\n}\n```\n\n```html\n\u003cngx-qrcode-styling [config]=\"config\"\u003e\u003c/ngx-qrcode-styling\u003e\n```\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eMulti input\u003c/b\u003e\u003c/summary\u003e\n\n```html\n\u003cngx-qrcode-styling\n  #qrcode\n  [config]=\"config\" \n  [type]=\"'canvas'\"\n  [shape]=\"'square'\"\n  [width]=\"200\"\n  [height]=\"200\"\n  [margin]=\"5\"\n  [data]=\"'Angular QRCode'\"\n  [image]=\"'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg'\"\u003e\n\u003c/ngx-qrcode-styling\u003e\n```\n```typescript\nimport { NgxQrcodeStylingComponent, Options } from 'ngx-qrcode-styling';\n\nexport class AppComponent {\n    @ViewChild('qrcode', { static: false }) public qrcode!: NgxQrcodeStylingComponent;\n\n    onUpdate(): void {\n        this.qrcode.update(this.qrcode.config, {\n          // height: 300,\n          // width: 300,\n          frameOptions: {\n            height: 600,\n            width: 600,\n          },\n          ...\n        }).subscribe((res) =\u003e {\n          // TO DO something!\n        });\n    }\n    \n    onDownload(): void {\n        this.qrcode.download(\"file-name.png\").subscribe((res) =\u003e {\n          // TO DO something!\n        });\n    }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eElement reference\u003c/b\u003e\u003c/summary\u003e\n\n```html\n\u003cdiv #canvas\u003e\u003c/div\u003e\n```\n```typescript\nimport { NgxQrcodeStylingService, Options } from 'ngx-qrcode-styling';\n\nexport class AppComponent implements AfterViewInit {\n    @ViewChild(\"canvas\", { static: false }) canvas: ElementRef;\n    public config: Options = {...};\n    \n    constructor(private qrcode: NgxQrcodeStylingService) {}\n\n    ngAfterViewInit(): void {\n        // Create QRCode by Service and ElementRef \n        this.qrcode.create(this.config, this.canvas.nativeElement).subscribe((res) =\u003e {\n          // TO DO something!\n        });\n    }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eElement id\u003c/b\u003e\u003c/summary\u003e\n\n```html\n\u003cdiv id=\"canvas\"\u003e\u003c/div\u003e\n```\n```typescript\nimport { NgxQrcodeStylingService, Options } from 'ngx-qrcode-styling';\n\nexport class AppComponent implements AfterViewInit {\n    public config: Options = {...};\n    \n    constructor(private qrcode: NgxQrcodeStylingService) {}\n   \n    ngAfterViewInit(): void {\n        // Create QRCode by Service and HTMLElement \n        this.qrcode.create(this.config, document.getElementById('canvas')).subscribe((res) =\u003e {\n          // TO DO something!\n        });\n    }\n}\n```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eUsing a template\u003c/b\u003e\u003c/summary\u003e\n\n```typescript\nimport { Options } from 'ngx-qrcode-styling';\n\nexport class AppComponent {\n    public config: Options = {\n        template: 'bitcoin',\n        ...\n    }\n}\n```\nOr\n```html\n\u003cngx-qrcode-styling [template]=\"'bitcoin'\" [data]=\"'ngx-qrcode-styling'\"\u003e\u003c/ngx-qrcode-styling\u003e\n```\n  \n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eUsing a frame\u003c/b\u003e\u003c/summary\u003e\n  \n```typescript\nimport { Options } from 'ngx-qrcode-styling';\n\nexport class AppComponent {\n    public config: Options = {\n        frameOptions: {\n              style: 'F_036',\n              width: 300,\n              height: 300,\n              x: 50,\n              y: 50\n        }\n        ...\n    }\n}\n```\nOr\n```html\n\u003cngx-qrcode-styling\n  [template]=\"'bitcoin'\"\n  [data]=\"'ngx-qrcode-styling'\"\n  [width]=\"280\"\n  [height]=\"280\"\n  [image]=\"'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/BTC_Logo.svg/60px-BTC_Logo.svg.png'\"\n  [frameOptions]=\"{style: 'F_036', height: 300, width: 300, x: 60, y: 60}\"\u003e\n\u003c/ngx-qrcode-styling\u003e\n```\n\u003c/details\u003e\n\n### API Documentation\n\n#### Input\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eframeOptions :hammer_and_wrench:\u003c/b\u003e\u003c/summary\u003e\n\nProperty                    |Type                                           |Default Value|Description\n----------------------------|-----------------------------------------------|-------------|-----------------------------------------------------\n(type)                      |`canvas`, `svg`                                |`canvas`     |The type of the element that will be rendered\n(shape)                     |`square`, `circle`                             |`square`     |The type of the element that will be rendered\n(width)                     |number                                         |`300`        |Size of canvas\n(height)                    |number                                         |`300`        |Size of canvas\n(margin)                    |number                                         |`0`          |Margin around canvas\n(data)                      |string                                         |             |The date will be encoded to the QR code\n(image)                     |string                                         |             |The image will be copied to the center of the QR code\n(scale)                     |number                                         |`0`          |Scale qrcode\n(rotate)                    |number                                         |`0`          |Rotate qrcode\n(template)                  |`default`, `ocean`, `sunflower`, `luxury`, `bitcoin`, `starbucks`, `angular`, `facebook`, `beans`, `green`, `sky`, `mosaic`, `coffee`, `vintage`, `stamp`, `chess`, `jungle` , `arabic` , `tea` , `grape` | `default`                 | The design of the element that will be rendered\n(frameOptions)              |object                                         |             |Options will be passed to `qrcode-generator` lib\n(qrOptions)                 |object                                         |             |Options will be passed to `qrcode-generator` lib\n(imageOptions)              |object                                         |             |Specific image options, details see below\n(dotsOptions)               |object                                         |             |Dots styling options\n(cornersSquareOptions)      |object                                         |             |Square in the corners styling options\n(backgroundOptions)         |object                                         |             |QR background styling options\n\n\u003c/details\u003e\n\n#### Event\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eComponent and Service :hammer_and_wrench:\u003c/b\u003e\u003c/summary\u003e\n\n| Field             | Description               | Type                    | Default   |\n| ---               | ---                       | ---                     | ---       |\n| (create)          | status                    | AsyncSubject            | -         | \n| (update)          | status                    | AsyncSubject            | -         | \n| (download)        | status                    | AsyncSubject            | -         | \n\n\u003c/details\u003e\n\n#### Models in Config \n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eOptions\u003c/b\u003e\u003c/summary\u003e\n\n```typescript\nexport declare type Options = {\n    type?: DrawType;\n    shape?: ShapeType;\n    width?: number;\n    height?: number;\n    margin?: number;\n    data?: string;\n    image?: string;\n    scale?: number;\n    rotate?: number;\n    template?: string;\n    frameOptions?: {\n        style?: string;\n        height?: number;\n        width?: number;\n        x?: number;\n        y?: number;\n        texts?: UnknownObject[]; // SVG Attribute reference\n        contents?: UnknownObject[]; // SVG Attribute reference\n        containers?: UnknownObject[]; // SVG Attribute reference\n    };\n    qrOptions?: {\n        typeNumber?: TypeNumber;\n        mode?: Mode;\n        errorCorrectionLevel?: ErrorCorrectionLevel;\n    };\n    imageOptions?: {\n        hideBackgroundDots?: boolean;\n        imageSize?: number;\n        crossOrigin?: string;\n        margin?: number;\n    };\n    dotsOptions?: {\n        type?: DotType;\n        color?: string;\n        gradient?: Gradient;\n    };\n    cornersSquareOptions?: {\n        type?: CornerSquareType;\n        color?: string;\n        gradient?: Gradient;\n    };\n    cornersDotOptions?: {\n        type?: CornerDotType;\n        color?: string;\n        gradient?: Gradient;\n    };\n    backgroundOptions?: {\n        round?: number;\n        color?: string;\n        gradient?: Gradient;\n    };\n};\n```\n\n\u003c/details\u003e\n\n#### Model Details\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eframeOptions\u003c/b\u003e\u003c/summary\u003e\n\nProperty            |Type                                              |Default Value\n--------------------|--------------------------------------------------|-------------\nstyle               |`F_020`, ... `F_080`, `FE_001`, ... `FE_XXX`      |`F_020`\nwidth               |number(`0 - max`)                                 |`300`\nheight              |number(`0 - max`)                                 |`300`\nx                   |number(`0 - max`)                                 |`50`\ny                   |number(`0 - max`)                                 |`50`\ntexts               |UnknownObject[]                                   | -\ncontents            |UnknownObject[]                                   | -\ncontainers          |UnknownObject[]                                   | -\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eqrOptions\u003c/b\u003e\u003c/summary\u003e\n\nProperty            |Type                                              |Default Value\n--------------------|--------------------------------------------------|-------------\ntypeNumber          |`0`,`40`                                          |`0`\nmode                |`Numeric`, `Alphanumeric`, `Byte`, `Kanji`        |\nerrorCorrectionLevel|`L`, `M`, `Q`, `H`                                |`Q`\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eimageOptions\u003c/b\u003e\u003c/summary\u003e\n\nProperty          |Type                                   |Default Value|Description\n------------------|---------------------------------------|-------------|------------------------------------------------------------------------------\nhideBackgroundDots|boolean                                |`true`       |Hide all dots covered by the image\nimageSize         |number                                 |`0.4`        |Coefficient of the image size. Not recommended to use ove 0.5. Lower is better\nmargin            |number                                 |`0`          |Margin of the image in px\ncrossOrigin       |`anonymous`, `use-credentials`         |             |Set \"anonymous\" if you want to download QR code from other origins.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003edotsOptions\u003c/b\u003e\u003c/summary\u003e\n\nProperty|Type                                                                          |Default Value|Description\n--------|------------------------------------------------------------------------------|-------------|-------------------\ncolor   |string                                                                        |`#000`       |Color of QR dots\ngradient|object                                                                        |             |Gradient of QR dots\ntype    |`rounded`,`dots`, `classy`, `classy-rounded`, `square`, `extra-rounded`       |`square`     |Style of QR dots\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003ebackgroundOptions\u003c/b\u003e\u003c/summary\u003e\n\nProperty|Type  |Default Value\n--------|------|-------------\ncolor   |string|`#fff`\ngradient|object|\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003ecornersSquareOptions\u003c/b\u003e\u003c/summary\u003e\n\nProperty|Type                                     |Default Value|Description\n--------|-----------------------------------------|-------------|-----------------\ncolor   |string                                   |             |Color of Corners Square\ngradient|object                                   |             |Gradient of Corners Square\ntype    |`dot`, `square`, `extra-rounded`         |             |Style of Corners Square\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003ecornersDotOptions\u003c/b\u003e\u003c/summary\u003e\n\nProperty|Type                     |Default Value|Description\n--------|-------------------------|-------------|-----------------\ncolor   |string                   |             |Color of Corners Dot\ngradient|object                   |             |Gradient of Corners Dot\ntype    |`dot`, `square`          |             |Style of Corners Dot\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eGradient\u003c/b\u003e\u003c/summary\u003e\n\n`dotsOptions.gradient`\n\n`backgroundOptions.gradient`\n\n`cornersSquareOptions.gradient`\n\n`cornersDotOptions.gradient`\n\nProperty  |Type                        |Default Value|Description\n----------|----------------------------|-------------|---------------------------------------------------------\ntype      |`linear`, `radial`          |`linear`     |Type of gradient spread\nrotation  |number                      |0            |Rotation of gradient in radians (Math.PI === 180 degrees)\ncolorStops|array of objects            |             |Gradient colors. Example `[{ offset: 0, color: 'blue' }, {  offset: 1, color: 'red' }]`\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eGradient colorStops\u003c/b\u003e\u003c/summary\u003e\n\n`dotsOptions.gradient.colorStops[]`\n\n`backgroundOptions.gradient.colorStops[]`\n\n`cornersSquareOptions.gradient.colorStops[]`\n\n`cornersDotOptions.gradient.colorStops[]`\n\nProperty|Type            |Default Value|Description\n--------|----------------|-------------|-----------------------------------\noffset  |`0`, `1`        |             |Position of color in gradient range\ncolor   |string          |             |Color of stop in gradient range\n\n\u003c/details\u003e\n\n#### Support versions\n  \n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth colspan=\"2\"\u003eSupport versions\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAngular 16\u003c/td\u003e\n    \u003ctd\u003e1.2.8\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAngular 6\u003c/td\u003e\n    \u003ctd\u003e1.2.7\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### Author Information\n  \n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth colspan=\"2\"\u003eAuthor Information\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eAuthor\u003c/td\u003e\n    \u003ctd\u003eDaiDH\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ePhone\u003c/td\u003e\n    \u003ctd\u003e+84845882882\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eCountry\u003c/td\u003e\n    \u003ctd\u003eVietnam\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### If you want donate for me!\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eBitcoin\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/id1945/id1945/master/donate-bitcoin.png\" width=\"182px\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n![Vietnam](https://raw.githubusercontent.com/id1945/id1945/master/vietnam.gif)\n\n[MIT License](https://github.com/id1945/ngx-qrcode-styling/blob/master/LICENSE). Copyright (c) 2021 DaiDH\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fid1945%2Fngx-qrcode-styling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fid1945%2Fngx-qrcode-styling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fid1945%2Fngx-qrcode-styling/lists"}