Angular 13: Пример генератора QR-кода на Angular 13

Генерация QR-кода на Angular 13; В этом уроке мы узнаем, как генерировать QR-код в приложениях Angular 13 с помощью angularx-qrcode.

Пример генератора QR-кода Angular 13

Используйте следующие шаги для создания QR-кода в приложениях Angular 13:

Шаг 1 — Создайте новое приложение Angular

Прежде всего, откройте свой терминал и выполните на нем следующую команду, чтобы установить приложение angular: 

ng new my-new-app

Затем выполните следующую команду в терминале, чтобы установить angular material:

ng add @angular/material

Шаг 2 — Установите пакет angularx-qrcode npm

На этом этапе вам нужно установить angularx-qrcode в наше приложение angular. Итак, откройте терминал и выполните следующую команду:

npm install angularx-qrcode --save

Шаг 3 — Добавьте модули в файл Module.ts

На этом этапе перейдите в каталог src/app и откройте файл app.module.ts. Затем добавьте в него следующий код: 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
   
import { AppComponent } from './app.component';
import { QRCodeModule } from 'angularx-qrcode';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    QRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Шаг 4 – Создайте QR-код в файле просмотра

На этом шаге создайте html и для отображения QR-кода в Angular приложении. Итак, посетите src/app/app.component.html и обновите в нем следующий код: 

<h1>How to Generate QR Code in Angular 13?</h1>
    
<qrcode [qrdata]="'myAngularxQrCode'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

Шаг 5 — Добавьте код в файл ts компонента

На этом этапе перейдите в каталог src/app и откройте app.component.ts. Затем добавьте в него следующий код: 

import { Component } from '@angular/core';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public myAngularxQrCode: string = null;
   
  constructor () {
    this.myAngularxQrCode = 'tutsmake.com';
  }
}

Шаг 6 — Запустите приложение Angular

На этом этапе выполните следующую команду в терминале, чтобы запустить приложение angular: 

ng serve