Como gerar códigos QR no Angular 10

Por 

$ npm install -g @angular/cli

No momento em que escrevo, angular / cli v10 será instalado em seu sistema.

Etapa 2 – Criação de um novo aplicativo Angular 10

Vamos agora criar nosso projeto. Volte para sua interface de linha de comando e execute os seguintes comandos:

$ cd ~
$ ng new angular10qrcode

A CLI fará algumas perguntas:

  • Você gostaria de adicionar o roteamento angular? Tipo y para sim, e
  • Qual formato de folha de estilo você gostaria de usar? Escolher CSS.

Em seguida, navegue até a pasta do seu projeto e execute o servidor de desenvolvimento local usando os seguintes comandos:

$ cd angular10qrcode
$ ng serve

Abra seu navegador da web e navegue até o http://localhost:4200/ endereço para ver seu aplicativo em execução.

Em seguida, abra um novo terminal e certifique-se de navegar até a pasta do seu projeto e execute o seguinte comando para instalar o ngx-qrcode biblioteca do npm usando o seguinte comando:

$ npm install @techiediaries/ngx-qrcode

Em seguida, abra o src/app/app.module.ts arquivo e importar NgxQRCodeModule de @techiediaries/ngx-qrcode em seu módulo da seguinte maneira:

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


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

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

Assim que a biblioteca for importada, você pode usar o ngx-qrcode componente em seu aplicativo Angular.

Observe que também importamos o FormsModule.

Em seguida, abra o src/app/app.component.ts arquivo e atualize-o da seguinte maneira:

import { Component } 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  {
  elementType = NgxQrcodeElementTypes.URL;
  correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
  value="https://www.techiediaries.com/";
}

Em seguida, abra o src/app/app.component.html arquivo e adicione o seguinte código:

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

Usamos várias propriedades para configurar nosso código QR, como:

  • o tipo,
  • o nível de correção de erros,
  • O valor que,
  • a classe CSS.

Você pode encontrar mais informações sobre essas propriedades e outras propriedades com suporte no oficial ngx-qrcode docs.

Em seguida, adicione uma área de texto para inserir o valor que deseja codificar:

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

Finalmente abra o src/styles.css arquivo e adicione os seguintes estilos:

.bshadow {

  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(5px 5px 5px #222222);
  opacity: .5;

}

textarea {
    margin-top: 15px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 250px;
    opacity: .5;
}

Esta é uma captura de tela do nosso aplicativo:

É isso que concluímos nosso projeto de exemplo Angular 10 que demonstra como gerar códigos QR.

Você pode nos visitar no Techiediaries para tutoriais sobre práticas de desenvolvimento web Angular e modernas.

Você pode verificar o aplicativo que construímos neste artigo ao vivo no Stackblitz: