npm i angularx-qrcode
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { QRCodeModule } from 'angularx-qrcode'; @NgModule({ imports: [BrowserModule, FormsModule, QRCodeModule], declarations: [AppComponent], 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 |
import { Component } from '@angular/core'; export class NgxQrCode { text: string; } @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { public qrdata: string = null; constructor() { console.log('AppComponent running'); this.qrdata = 'Initial QR code data string'; } changeValue(newValue: string): void { this.qrdata = newValue; } } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<h1>angularx-qrcode demo implementation</h1> <qrcode [qrdata]="qrdata" [size]="256" [level]="'M'"></qrcode> <br> <div class="text"> <label> Type to change: <input [(ngModel)]="qrdata" placeholder="name"> </label> <br> <br> <button (click)="changeValue('Bruce')">Change Value to Bruce</button> <button (click)="changeValue('Peter Parker')">Change Value to Peter Parker</button> <button (click)="changeValue('42')">Change Value to 42</button> </div> |
FULL SOURCE CODE
