How To Generate Barcode In Angular

The Code Points August 21, 2022 0

In this article, we will learn about the how to generate barcode in angular application with demonstrate application. 

An angular component creating 1-D based barcodes . Supported barcode formats CODE128, EAN, CODE39, ITF-14, MSI, Pharmacode, Codabar.

So let's start with implementation,

First, we need to create a angular application using the following command. if you are implement in existing application then please skip this step.

ng new nbx-barcode-example

Now, Using following command install the ngx-barcode npm package for barcode generation.

npm install ngx-barcode –save

Now, Using the following code import the NgxBarcodeModule module into the app.module.ts file.

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 { }

After we imported the NgxBarcodeModule module, we able to use the ngx-barcode component in our Angular application.

Now, open the app.component.html file and add the following code for barcode generation.

<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>

Now, Add the following code under the app.component.ts file for the variable two-binding into the barcode component.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Barcode generator';
  value = 'The Code Points';
  
  get values(): string[] {
    return this.value.split('\n');
  }
 
}

Now, run the application using the ng serve command into the terminal and see the browser screen we are able to generate barcode as per given input text.

Conclusion

In this article, we learn how to generate barcode in angular application with demonstrate application.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.