import { NgxQrcodeStylingModule } from 'ngx-qrcode-styling';

@NgModule({
    imports: [
        NgxQrcodeStylingModule,
    ]
})

import { Options } from 'ngx-qrcode-styling';

export class AppComponent {
  public config: Options = {
    width: 300,
    height: 300,
    data: "https://www.facebook.com/",
    image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
    margin: 5,
    dotsOptions: {
      color: "#1977f3",
      type: "dots"
    },
    backgroundOptions: {
      color: "#ffffff",
    },
    imageOptions: {
      crossOrigin: "anonymous",
      margin: 0
    }
  };
}

import { NgxQrcodeStylingService, Options } from 'ngx-qrcode-styling';

export class AppComponent implements AfterViewInit {
    @ViewChild("canvas", { static: false }) canvas: ElementRef;
    public config: Options = {...};
    
    constructor(private qrcode: NgxQrcodeStylingService) {}

    ngAfterViewInit(): void {
        // Create QRCode by Service and ElementRef 
        this.qrcode.create(this.config, this.canvas.nativeElement)
    }
}

import { NgxQrcodeStylingService, Options } from 'ngx-qrcode-styling';

export class AppComponent implements AfterViewInit {
    public config: Options = {...};
    
    constructor(private qrcode: NgxQrcodeStylingService) {}
   
    ngAfterViewInit(): void {
        // Create QRCode by Service and HTMLElement 
        this.qrcode.create(this.config, document.getElementById('canvas'))
    }
}

export declare type Options = {
    type?: DrawType;
    shape?: ShapeType;
    width?: number;
    height?: number;
    margin?: number;
    data?: string;
    image?: string;
    qrOptions?: {
        typeNumber?: TypeNumber;
        mode?: Mode;
        errorCorrectionLevel?: ErrorCorrectionLevel;
    };
    imageOptions?: {
        hideBackgroundDots?: boolean;
        imageSize?: number;
        crossOrigin?: string;
        margin?: number;
    };
    dotsOptions?: {
        type?: DotType;
        color?: string;
        gradient?: Gradient;
    };
    cornersSquareOptions?: {
        type?: CornerSquareType;
        color?: string;
        gradient?: Gradient;
    };
    cornersDotOptions?: {
        type?: CornerDotType;
        color?: string;
        gradient?: Gradient;
    };
    backgroundOptions?: {
        round?: number;
        color?: string;
        gradient?: Gradient;
    };
};