menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

Angular:QRcode

folder Projet: angularApp
Générer des QRcode à l'aide librarie angularx-qrcode

Installer QrCode librarie

npm install angularx-qrcode --save

app.component.html

<div class="card text-center ">
<div class="card-header bg-info">
QRcode example
</div>
<div class="card-body">
<h5 class="card-title">{{chainetoQR}}</h5>
<p class="card-text"><qrcode [qrdata]="chainetoQR" [width]="500" [errorCorrectionLevel]="'M'"></qrcode>
</p>
</div>
<div class="card-footer text-muted">
<input type="text" class="form-control" [(ngModel)]="chainetoQR">
</div>
</div>

app.component.ts

import { Component } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label } from 'ng2-charts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public chainetoQR: string = "Hello";
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

//importer le module QRCodeModule contenant les fonctionnalités de angularx-qrcode
import { QRCodeModule } from 'angularx-qrcode';
@NgModule({
declarations: [
AppComponent
],
imports: [
QRCodeModule,
BrowserModule,
AppRoutingModule,
FormsModule ,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }