Add Barcode In Angular

  • Here, we will learn how to add barcode in our angular project.for this at first we need to install ngx-barcode in our project using following command

npm i ngx-barcode

  • Add below lines in app.component.ts
import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import { NgxBarcodeModule } from 'ngx-barcode';

 @NgModule({ declarations: [AppComponent],

 imports: [ BrowserAnimationsModule, BrowserModule, NgxBarcodeModule], 
 providers: [], bootstrap: [AppComponent] })


  • Add below lines in app.component.ts
import { Component } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {
  value = '';
  displayValue = true;
  fontSize = 20;
  background = '#ffffff';

  get values(): string[] {
    return this.value.split('\n');
  • Add below lines in app.component.html
<textarea placeholder="Barcode value" [(ngModel)]="value"></textarea>
<ngx-barcode *ngFor="let bcValue of values" [bc-value]="bcValue"></ngx-barcode>

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories