Usare JsBarcode in Angular

JsBarcode è una libreria scritta in Javascript per la generazione di barcode.

Esistono diversi wrapper per Angular ma nessuno mi ha funzionato; come non mi hanno funzionato altre librerie non basate su questa.

Alla fine ho dovuto mi sono arrangiato e l'ho fatta funzionare per Angular.

Prima di tutto installiamola:

npm install jsbarcode --save

A questo punto vediamo il componente:

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

declare var require: any;
const JsBarcode = require('jsbarcode');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  title = 'TestAngular';

  constructor() {
  }

  ngOnInit(): void {
    window.setTimeout(() => {
      JsBarcode('#barcode', '0401995000042', {
        format: 'ean13',
        displayValue: false
      });
    }, 1000);
  }

}

Come vedete ho dovuto usare require; per farlo dovete inserire questa riga prima:

declare var require: any;

Altra cosa importante è il timeout; sennò non riesce a renderizzare l'immagine.

Infine l'HTML:

<svg id="barcode"></svg>

Enjoy!