【Angular】QRコードを作ろう【angularx-qrcode】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はAngularでQRコードを生成する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

AngularでQRコードが作れる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

作りたいもの
1. 実行環境
AngularでQRコードをつくろう！
1. Angular QR Code Generatorを使おう！
まとめ

作りたいもの

このようにリアルタイムで更新されるQRコードジェネレータを作ります。

これが今回の完成形だよ！
https://same-hack.github.io/#/qrcode-generator

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

AngularでQRコードをつくろう！

Angular QR Code Generatorを使おう！

Angular QR Code Generatorのインストール

npm install angularx-qrcode --save

  <qrcode [qrdata]="変換元のURL" [width]="幅" [errorCorrectionLevel]="'M'"></qrcode>

HTMLにこのように記述するだけでQRコードを表示することができるよ！

app.modules.ts

既存のコードにQRCodeModuleとFormsModuleを

追加でインポートしてください

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { QRCodeModule } from 'angularx-qrcode';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  // 入力欄初期値
  inputUrl: string = 'https://samehack.com/';
}

app.component.html

<div class="">
  <input type="text" [(ngModel)]="inputUrl" />
  <br />
  <br />
  <qrcode
    [qrdata]="inputUrl"
    [width]="256"
    [errorCorrectionLevel]="'M'"
  ></qrcode>
</div>

画面で確認してみよう！

このようにURLを変更するとQRコードもリアルタイムで更新されることが確認できました。

リアルタイムで更新するための双方向データバインディングngModelについては
こちらの記事を参考にしてください！

【Angular】ngModelを使おう！【双方向データバインディング】

まとめ

angularx-qrcodeをインストールすると、簡単にQRコードが生成できる
リアルタイムで更新するためにはngModelを使う

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram