An angular component for Angular 9 - 18 for creating 1-D barcodes based on Lindell's JsBarcode.
This is forked from yobryon/ngx-barcode and upgraded to Angular 6 works on Angular 18.x.
Supports all barcode formats provided by JsBarcode
- CODE128
- CODE128 (automatic mode switching)
- CODE128 A/B/C (force mode)
- EAN / UPC
- EAN13
- UPC
- EAN8
- EAN5
- EAN2
- CODE39
- ITF
- ITF
- ITF-14
- MSI
- MSI10
- MSI11
- MSI1010
- MSI1110
- Pharmacode
- Codabar
To use ngx-barcode6 in your project, install it via npm:
npm install --save ngx-barcode6 jsbarcode@3.11.6
For Angular 8 use ngx-barcode6@1.0.10
.
npm install --save ngx-barcode6@1.0.10 jsbarcode@3.11.5
For Angular 10 try ngx-barcode6@1.0.12
.
Because of Angular 16 and Nodejs 18 i think you can not use this actual version for lower than Angular 15.
Import the NgxBarcode6Module into your desired module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import ngx-barcode module
import { NgxBarcode6Module } from 'ngx-barcode6';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxBarcode6Module],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
If you prefer the Standalone Components then do it like this:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { NgxBarcode6Module } from 'ngx-barcode6';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, FormsModule, RouterOutlet, NgxBarcode6Module],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
...
}
Once the library is imported, you can use the ngx-barcode6 component in your Angular application:
<!-- Adding a barcode in app.component.html -->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<div style="text-align:center">
<ngx-barcode6
[bc-format]="'MSI'"
[bc-value]="'12345678901231'"
[bc-display-value]="true"
>
</ngx-barcode6>
</div>
MIT © Bryon Williams, Edgar Giese