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.
Daftar Isi
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