ahmadajah03 Mon Mar 2021 1 year ago

Contoh Tutorial Angular 11 Create/Generate QR Code

Angular 11 contoh generate kode QR. Dalam tutorial ini, Anda akan belajar cara membuat kode qr di aplikasi angular 11.

Tutorial ini akan menggunakan paket npm angularx-qrcode untuk generate kode qr dalam aplikasi angular 11. Dan import modul QRCodeModule untuk generate kode. Juga dijelaskan secara sederhana langkah demi langkah generate kode qr angular 11.

Langkah 1 - Buat Aplikasi Angular Baru

Pertama-tama, buka terminal Anda dan jalankan perintah berikut untuk menginstal aplikasi angular:

ng new my-new-app

Kemudian jalankan perintah berikut di terminal untuk menginstal material angular:

ng add @angular/material

Langkah 2 - Instal Paket angularx-qrcode npm

Pada langkah ini, Anda perlu menginstal angularx-qrcode di aplikasi angular kami. Jadi, buka terminal Anda dan jalankan perintah berikut:

npm instal angularx-qrcode --save

Langkah 3 - Tambahkan Kode pada File Module.ts

Pada langkah ini, kunjungi direktori src/app dan buka file app.module.ts. Kemudian tambahkan kode berikut ke dalamnya:

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 { }

Langkah 4 - Tambahkan Kode pada View File

Pada langkah ini, buat html dan untuk menampilkan kode qr dalam asngular 11 ap. Jadi, kunjungi src/app/app.component.html dan perbarui kode berikut ke dalamnya:

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

Langkah 5 - Tambahkan Kode Pada File Component

Pada langkah ini, kunjungi direktori src/app dan buka app.component.ts. Kemudian tambahkan kode berikut ke dalam file 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 = 'Medikre.com';
  }
}

Langkah 6 - Jalankan Aplikasi Angular

Pada langkah ini, jalankan perintah berikut di terminal untuk memulai aplikasi angular:

ng serve
create barcode angular generate barcode angular