Angular 10/11에서 QR 코드 생성/생성

우리는 각도 11에서 QR 코드를 생성하는 방법을 배우고 있습니다. QR 코드 생성기 앱은 쉬운 과정입니다. 우리는 무작위 QR 코드 생성기를 배웁니다. 아래를 참조하십시오.

이 튜토리얼은 angularx-qrcode npm 패키지를 사용하여 angular 11 애플리케이션에서 QR 코드를 생성합니다. 그리고 QRCodeModule 모듈 코드를 가져옵니다. 아래 단계별 무작위 QR 코드 생성기 각도 11을 참조하십시오.

Create/Generate QR Codes In Angular 10/11



1단계 – 새 Angular 앱 만들기
먼저 Angular CLI를 사용하여 Angular 11 프로젝트를 만들어 보겠습니다.

터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하여 새 각도 프로젝트를 생성합니다. Go
ng new my-new-app
2단계 – angularx-qrcode npm 패키지 설치
이 단계에서는 angular 애플리케이션에 angularx-qrcode를 설치해야 합니다. 따라서 다음 명령:
npm install angularx-qrcode --save
3단계 – Module.ts 파일에 코드 추가

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { QRCodeModule } from 'angularx-qrcode';    //<------------ import this code ------------

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    QRCodeModule      //<------------ import this code ------------
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4단계 – 보기 파일에 코드 추가

<h1>Create/Generate QR Codes In Angular 10/11 -  phpcodingstuff.com</h1>

<qrcode [qrdata]="'myAngularxQrCode'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

5단계 – 구성 요소 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 () {
    // assign a value
    this.myAngularxQrCode = 'Your QR code data string';
  }
}

6단계 – Angular 앱 시작
ng serve
원본 소스: https://www.phpcodingstuff.com/blog/how-to-create-generate-qr-codes-in-angular.html