npm i ngx-qrcode-styling
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgxQrcodeStylingModule } from 'ngx-qrcode-styling'; import { AppComponent } from './app.component'; import { FrameEditComponent } from './frame-edit/frame-edit.component'; import { FramesComponent } from './frames/frames.component'; import { TemplateComponent } from './template/template.component'; @NgModule({ imports: [BrowserModule, NgxQrcodeStylingModule], declarations: [AppComponent, TemplateComponent, FrameEditComponent, FramesComponent], bootstrap: [AppComponent], }) export class AppModule {} |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import { Component, ViewEncapsulation } from '@angular/core'; import { NgxQrcodeStylingComponent, NgxQrcodeStylingService, } from 'ngx-qrcode-styling'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], encapsulation: ViewEncapsulation.None, }) export class AppComponent { constructor(private testDI: NgxQrcodeStylingService) { // test DI! } /** * Update */ public onUpdate(qrcode: NgxQrcodeStylingComponent): void { qrcode .update(qrcode.config, { frameOptions: { height: 400 + 150, width: 300 + 150, }, }) .subscribe((res) => { // TO DO something! console.log('update:', res); console.log('Element:', res?.container?.querySelector(qrcode.config.type == 'svg' ? 'svg' : 'canvas')); }); } /** * Download */ onDownload(qrcode: NgxQrcodeStylingComponent): void { qrcode.download().subscribe((res) => { // TO DO something! console.log('download:', res); }); } } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<h2>ngx-qrcode-styling</h2> <h2>Author: DaiDH</h2> <ngx-qrcode-styling #qrcode [template]="'default'" [data]="'Hà Nội, Việt Nam'" [width]="200" [height]="200" [margin]="3" [backgroundOptions]="{ color: '#fff0' }" [frameOptions]="{ style: 'FE_020', height: 400, width: 300, x: 88, y: 410, background: 'bisque', texts: [{ textContent: 'Create 2022', fill: '#2c2c2c', x: '31%', y: '58%', fontSize: '15pt', fontFamily: 'cursive' },{ textContent: 'Author: DaiDH', fill: '#2c2c2c', x: '29%', y: '90%', fontSize: '15pt', fontFamily: 'cursive' }] }" [dotsOptions]="{color: '#2c2c2c'}" ></ngx-qrcode-styling> <br /> <br /> <button (click)="onUpdate(qrcode)">Update</button> | <button (click)="onDownload(qrcode)">Download</button> <h2><a href="https://github.com/id1945/ngx-qrcode-styling/wiki" target="_blank">Rules for QRCodes</a></h2> <app-template></app-template> <app-frames></app-frames> <app-frame-edit></app-frame-edit> |
FULL SOURCE CODE
