npm i ngx-qrcode

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';


@NgModule({
  imports:      [ BrowserModule, FormsModule, NgxQRCodeModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';

@NgModule({

imports: [ BrowserModule, FormsModule, NgxQRCodeModule],

declarations: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

app.component.ts

import { Component, VERSION } from '@angular/core';
import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  elementType = NgxQrcodeElementTypes.URL;
  correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
  value = 'https://www.codingshiksha.com/';
}

import { Component, VERSION } from '@angular/core';

import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular ' + VERSION.major;

elementType = NgxQrcodeElementTypes.URL;

correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;

value = 'https://www.codingshiksha.com/';

}

app.component.html

<ngx-qrcode
  [elementType]="elementType"
  [errorCorrectionLevel]="correctionLevel"
  [value]="value"
  alt="Demo QR Code"
  cssClass="bshadow"></ngx-qrcode>

<textarea [(ngModel)] = "value"></textarea>

<ngx-qrcode

[elementType]="elementType"

[errorCorrectionLevel]="correctionLevel"

[value]="value"

alt="Demo QR Code"

cssClass="bshadow"></ngx-qrcode>

Angular ngx-qrcode Example to Generate QRCodes From Text and Download it as PNG Image in TS

FULL SOURCE CODE

Comments

Leave a Reply Cancel reply

Archives