feat: add event emitter to qrcode url

[PedroBicudo]

Feature

I added an EventEmitter that outputs the SafeUrl of the QRCode to the parent component of the <qrcode> component.

Details

• The emission of the URL is done by the emitQRCodeURL method
• When ElementType is canvas or url or img the EventEmitter returns png.
• When the ElementType is svg the EventEmitter returns svg.

Example of use

@Component({
    selector: "app-example",
    template: `
         <qrcode 
            colorLight="#FAF9F8" 
            [qrdata]="text" 
            [width]="300" 
            [errorCorrectionLevel]="'M'"
            (qrCodeURL)="onChangeURL($event)"
        ></qrcode>

        <a [href]="qrCodeSrc" download="qrcode">Download</a>
    `
})
export class ExampleComponent {
    qrCodeSrc!: SafeUrl;

    onChangeURL(url: SafeUrl) {
        this.qrCodeSrc = url;
    }

}  

PS: I apologize for any typos, I'm using google translator.

[Cordobo]

Hi @PedroBicudo,

first, thanks for your contribution and no worries, I understand your difficulties, English isn't my 1st language either.

As I read the code and your example code above, the main purpose of your pull request is to have an integrated way to download the generated QR Code image, right? If so, could you please add a section to the Readme with one or more use cases? Don't worry about about any typos, we can fix those later.

Did you try to work around the casting of the elements, e.g. (element as HTMLImageElement)?

Again, thanks for your contribution and I'm more than happy to merge this.

[PedroBicudo]

could you please add a section to the Readme with one or more use cases?

Sure, no problem, I'm adding an example based on the previous examples. I don't know if it's any good, so I appreciate any feedback.

Did you try to work around the casting of the elements, e.g. (element as HTMLImageElement)?

The emitQRCodeURL procedure takes one of three data types (HTMLCanvasElement, HTMLImageElement, SVGSVGElement). To make it explicit which type is being passed I cast the element variable to one of these types.

[Cordobo]

@PedroBicudo Many thanks for your contribution to angularx-qrcode

@iconio Thanks for the code review

The changes are now live in 13.0.15