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

dotsOptions.gradient

backgroundOptions.gradient

cornersSquareOptions.gradient

cornersDotOptions.gradient

dotsOptions.gradient.colorStops[]

backgroundOptions.gradient.colorStops[]

cornersSquareOptions.gradient.colorStops[]

cornersDotOptions.gradient.colorStops[]