Gathering detailed insights and metrics for ngx-qrcode-styling-angular
ngx-qrcode-styling
This library is built for the purpose for generating QR codes with a logo and styling.
ngx-qrcode-styling-his
This library is built for the purpose for generating QR codes with a logo and styling.
blinked-qr
This library is built for the purpose for dynamic generating QR codes with a logo and styling.
This library is built for the purpose generating QR codes with a logo and styling.
npm install ngx-qrcode-styling-angularTypescript
Module System
Node Version
NPM Version
HTML (97.82%)
TypeScript (1.95%)
SCSS (0.23%)
Total Downloads
2,247
Last Day
4
Last Week
29
Last Month
152
Last Year
1,110
22 Stars
7 Commits
9 Forks
2 Watching
4 Branches
1 Contributors
Latest Version
1.1.35
Package Id
ngx-qrcode-styling-angular@1.1.35
Unpacked Size
13.81 MB
Size
5.41 MB
File Count
161
NPM Version
8.15.0
Node Version
18.7.0
Cumulative downloads
Total Downloads
Last day
-60%
4
Compared to previous day
Last week
0%
29
Compared to previous week
Last month
-10.6%
152
Compared to previous month
Last year
153.4%
1,110
Compared to previous year
11
20
This library is built for the purpose generating QR codes with a logo and styling.
Demo on the Stackblitz or Codesandbox
Generating styled QRcodes Online
Install ngx-qrcode-styling from npm:
1npm install ngx-qrcode-styling --save
Add wanted package to NgModule imports:
1import { NgxQrcodeStylingModule } from 'ngx-qrcode-styling'; 2 3@NgModule({ 4 imports: [ 5 NgxQrcodeStylingModule, 6 ] 7})
Add component to your page:
1import { Options } from 'ngx-qrcode-styling'; 2 3export class AppComponent { 4 public config: Options = { 5 width: 300, 6 height: 300, 7 data: "https://www.facebook.com/", 8 image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg", 9 margin: 5, 10 dotsOptions: { 11 color: "#1977f3", 12 type: "dots" 13 }, 14 backgroundOptions: { 15 color: "#ffffff", 16 }, 17 imageOptions: { 18 crossOrigin: "anonymous", 19 margin: 0 20 } 21 }; 22}
1<ngx-qrcode-styling [config]="config"></ngx-qrcode-styling>
Or
1<ngx-qrcode-styling 2 #qrcode 3 [config]="config" 4 [type]="'canvas'" 5 [shape]="'square'" 6 [width]="200" 7 [height]="200" 8 [margin]="5" 9 [data]="'Angular QRCode'" 10 [image]="'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg'"> 11</ngx-qrcode-styling>
1import { NgxQrcodeStylingComponent, Options } from 'ngx-qrcode-styling'; 2 3export class AppComponent { 4 @ViewChild('qrcode', { static: false }) public qrcode!: NgxQrcodeStylingComponent; 5 6 onUpdate(): void { 7 this.qrcode.update(this.qrcode.config, { 8 // height: 300, 9 // width: 300, 10 frameOptions: { 11 height: 600, 12 width: 600, 13 }, 14 ... 15 }).subscribe((res) => { 16 // TO DO something! 17 }); 18 } 19 20 onDownload(): void { 21 this.qrcode.download("file-name.png").subscribe((res) => { 22 // TO DO something! 23 }); 24 } 25}
Or
1<div #canvas></div>
1import { NgxQrcodeStylingService, Options } from 'ngx-qrcode-styling'; 2 3export class AppComponent implements AfterViewInit { 4 @ViewChild("canvas", { static: false }) canvas: ElementRef; 5 public config: Options = {...}; 6 7 constructor(private qrcode: NgxQrcodeStylingService) {} 8 9 ngAfterViewInit(): void { 10 // Create QRCode by Service and ElementRef 11 this.qrcode.create(this.config, this.canvas.nativeElement).subscribe((res) => { 12 // TO DO something! 13 }); 14 } 15}
Or
1<div id="canvas"></div>
1import { NgxQrcodeStylingService, Options } from 'ngx-qrcode-styling'; 2 3export class AppComponent implements AfterViewInit { 4 public config: Options = {...}; 5 6 constructor(private qrcode: NgxQrcodeStylingService) {} 7 8 ngAfterViewInit(): void { 9 // Create QRCode by Service and HTMLElement 10 this.qrcode.create(this.config, document.getElementById('canvas')).subscribe((res) => { 11 // TO DO something! 12 }); 13 } 14}
1import { Options } from 'ngx-qrcode-styling'; 2 3export class AppComponent { 4 public config: Options = { 5 template: 'bitcoin', 6 ... 7 } 8}
Or
1<ngx-qrcode-styling [template]="'bitcoin'" [data]="'ngx-qrcode-styling'"></ngx-qrcode-styling>
1import { Options } from 'ngx-qrcode-styling'; 2 3export class AppComponent { 4 public config: Options = { 5 frameOptions: { 6 style: 'style36', 7 width: 300, 8 height: 300, 9 x: 50, 10 y: 50 11 } 12 ... 13 } 14}
Or
1<ngx-qrcode-styling 2 [template]="'bitcoin'" 3 [data]="'ngx-qrcode-styling'" 4 [width]="280" 5 [height]="280" 6 [image]="'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/BTC_Logo.svg/60px-BTC_Logo.svg.png'" 7 [frameOptions]="{style: 'style36', height: 300, width: 300, x: 60, y: 60}"> 8</ngx-qrcode-styling>
1export declare type Options = { 2 type?: DrawType; 3 shape?: ShapeType; 4 width?: number; 5 height?: number; 6 margin?: number; 7 data?: string; 8 image?: string; 9 template?: string; 10 frameOptions?: { 11 style?: string; 12 height?: number; 13 width?: number; 14 x?: number; 15 y?: number; 16 }; 17 qrOptions?: { 18 typeNumber?: TypeNumber; 19 mode?: Mode; 20 errorCorrectionLevel?: ErrorCorrectionLevel; 21 }; 22 imageOptions?: { 23 hideBackgroundDots?: boolean; 24 imageSize?: number; 25 crossOrigin?: string; 26 margin?: number; 27 }; 28 dotsOptions?: { 29 type?: DotType; 30 color?: string; 31 gradient?: Gradient; 32 }; 33 cornersSquareOptions?: { 34 type?: CornerSquareType; 35 color?: string; 36 gradient?: Gradient; 37 }; 38 cornersDotOptions?: { 39 type?: CornerDotType; 40 color?: string; 41 gradient?: Gradient; 42 }; 43 backgroundOptions?: { 44 round?: number; 45 color?: string; 46 gradient?: Gradient; 47 }; 48};
| Property | Type | Default Value | Description |
|---|---|---|---|
| type | string (canvas, svg) | 'canvas' | The type of the element that will be rendered |
| shape | string (square, circle) | 'square' | The type of the element that will be rendered |
| width | number | 300 | Size of canvas |
| height | number | 300 | Size of canvas |
| margin | number | 0 | Margin around canvas |
| data | string | The date will be encoded to the QR code | |
| image | string | The image will be copied to the center of the QR code | |
| template | string (classic, ocean, sunflower, luxury, bitcoin, starbucks, angular, facebook, jungle, green, sky, mosaic, coffee, vintage, stamp, chess) | 'classic' | The design of the element that will be rendered |
| frameOptions | object | Options will be passed to qrcode-generator lib | |
| qrOptions | object | Options will be passed to qrcode-generator lib | |
| imageOptions | object | Specific image options, details see below | |
| dotsOptions | object | Dots styling options | |
| cornersSquareOptions | object | Square in the corners styling options | |
| cornersDotOptionsHelper | object | Dots in the corners styling options | |
| backgroundOptions | object | QR background styling options |
frameOptions
| Property | Type | Default Value |
|---|---|---|
| style | string(style20, style21, style22, style23, style24, style25, style26, style27, style28, style29, style30, style31, style32, style33, style34, style35, style36, style37, style38, style39, style40, style41, style42, style43, style44, style45, style46, style47, style48, style49, style50, style51, style52, style53, style54, style55, style56, style57, style58, style59, style60, style61, style62, style63, style64, style65, style66, style67, style68, style69, style70, style71, style72, style73, style74, style75, style76, style77, style78, style79, style80) | 'style20' |
| width | number(0 - max) | 300 |
| height | number(0 - max) | 300 |
| x | number(0 - max) | 50 |
| y | number(0 - max) | 50 |
qrOptions
| Property | Type | Default Value |
|---|---|---|
| typeNumber | number (0 - 40) | 0 |
| mode | string ('Numeric' 'Alphanumeric' 'Byte' 'Kanji') | |
| errorCorrectionLevel | string ('L' 'M' 'Q' 'H') | 'Q' |
imageOptions
| Property | Type | Default Value | Description |
|---|---|---|---|
| hideBackgroundDots | boolean | true | Hide all dots covered by the image |
| imageSize | number | 0.4 | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |
| margin | number | 0 | Margin of the image in px |
| crossOrigin | string('anonymous' 'use-credentials') | Set "anonymous" if you want to download QR code from other origins. |
dotsOptions
| Property | Type | Default Value | Description |
|---|---|---|---|
| color | string | '#000' | Color of QR dots |
| gradient | object | Gradient of QR dots | |
| type | string ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded') | 'square' | Style of QR dots |
backgroundOptions
| Property | Type | Default Value |
|---|---|---|
| color | string | '#fff' |
| gradient | object |
cornersSquareOptions
| Property | Type | Default Value | Description |
|---|---|---|---|
| color | string | Color of Corners Square | |
| gradient | object | Gradient of Corners Square | |
| type | string ('dot' 'square' 'extra-rounded') | Style of Corners Square |
cornersDotOptions
| Property | Type | Default Value | Description |
|---|---|---|---|
| color | string | Color of Corners Dot | |
| gradient | object | Gradient of Corners Dot | |
| type | string ('dot' 'square') | Style of Corners Dot |
dotsOptions.gradient
backgroundOptions.gradient
cornersSquareOptions.gradient
cornersDotOptions.gradient
| Property | Type | Default Value | Description |
|---|---|---|---|
| type | string ('linear' 'radial') | "linear" | Type of gradient spread |
| rotation | number | 0 | Rotation of gradient in radians (Math.PI === 180 degrees) |
| colorStops | array of objects | Gradient colors. Example [{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }] |
dotsOptions.gradient.colorStops[]
backgroundOptions.gradient.colorStops[]
cornersSquareOptions.gradient.colorStops[]
cornersDotOptions.gradient.colorStops[]
| Property | Type | Default Value | Description |
|---|---|---|---|
| offset | number (0 - 1) | Position of color in gradient range | |
| color | string | Color of stop in gradient range |
1.1.0 >= Angular 9
1.0.13 >= Angular 8
Author: DaiDH, Tel: 0845882882
MIT License. Copyright (c) 2021 DaiDH
No vulnerabilities found.
No security vulnerabilities found.