Based on Lindell’s JsBarcode, this Angular component for Angular 13+ creates 1-D barcodes.
Features
- supports all of JsBarcode’s barcode types
- CODE128
- EAN
- CODE39
- ITF-14
- MSI
- Pharmacode
- Codabar
Step 1 – Install plugins
- npm install ngx-barcode –save
Step 2 – Import the NgxBarcodeModule into the module you want to use :
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HeaderComponent } from './components/header/header.component'; import { NgxBarcodeModule } from 'ngx-barcode'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent, HeaderComponent ], imports: [ BrowserModule, AppRoutingModule, NgxBarcodeModule, ReactiveFormsModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Step 3 –After you’ve imported the library, you can use the ngx-barcode component in your Angular app:
<div> <h3> {{title}} </h3> <textarea placeholder="bc-value" [(ngModel)]="value"></textarea> <ngx-barcode *ngFor="let bcValue of values" [bc-value]="value" [bc-display-value]="true"></ngx-barcode> </div>
Step 4 –Make the following code modifications to the app components ts.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Barcode generator'; value = ''; get values(): string[] { return this.value.split('\n'); } }
Step 5 –Run Application
ng -o serve