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}

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}

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: 'F_036',
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: 'F_036', 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    scale?: number;
10    rotate?: number;
11    template?: string;
12    zIndex?: 1 | 2;
13    frameOptions?: {
14        style?: string;
15        height?: number;
16        width?: number;
17        x?: number;
18        y?: number;
19        texts?: UnknownObject[]; // SVG Attribute reference
20        contents?: UnknownObject[]; // SVG Attribute reference
21        containers?: UnknownObject[]; // SVG Attribute reference
22    };
23    qrOptions?: {
24        typeNumber?: TypeNumber;
25        mode?: Mode;
26        errorCorrectionLevel?: ErrorCorrectionLevel;
27    };
28    imageOptions?: {
29        hideBackgroundDots?: boolean;
30        imageSize?: number;
31        crossOrigin?: string;
32        margin?: number;
33    };
34    dotsOptions?: {
35        type?: DotType;
36        color?: string;
37        gradient?: Gradient;
38    };
39    cornersSquareOptions?: {
40        type?: CornerSquareType;
41        color?: string;
42        gradient?: Gradient;
43    };
44    cornersDotOptions?: {
45        type?: CornerDotType;
46        color?: string;
47        gradient?: Gradient;
48    };
49    backgroundOptions?: {
50        round?: number;
51        color?: string;
52        gradient?: Gradient;
53    };
54};

dotsOptions.gradient

backgroundOptions.gradient

cornersSquareOptions.gradient

cornersDotOptions.gradient

dotsOptions.gradient.colorStops[]

backgroundOptions.gradient.colorStops[]

cornersSquareOptions.gradient.colorStops[]

cornersDotOptions.gradient.colorStops[]