Forem: Ivan Simeonov

Ngx-Translate: Internationalization (i18n) library for Angular

Ivan Simeonov — Thu, 23 Feb 2023 07:00:03 +0000

Internationalization in Angular using ngx-translate

Table of content

Introduction
Optional steps
- Create Angular project
- Add Bootstrap and flag-icons libraries
- Update the html and styles
Ngx-Translate
- Add ngx-translate to the project
- Translation Module and HttpLoader Setup
- Translation Service Setup
- Creation of JSON Translation files
- Translations usage in templates and code
- Bonus HTML Tags
- Default Browser language
- Runtime language changes
- Bonus Get Browser Language
Summary
Contact Me

Introduction

Internationalization (i18n) is the process of adapting software to support multiple languages and cultures. In the world of Angular, ngx-translate is a popular library that helps developers add i18n support to their projects. By using ngx-translate, developers can easily translate static text in their applications, as well as dynamic content that is generated by user interactions. With its simple API and comprehensive documentation, ngx-translate makes it easy for developers to add internationalization to their Angular projects and ensure that their applications are accessible to users around the world. In this article, we will explore how to add ngx-translate to an Angular project and how to use it to create a multilingual user interface.

Optional steps

For the purposes of this tutorial, before integrating ngx-translate into an Angular project, we will have to first create one. Then we will add a styling library, such as Bootstrap and update the HTML and styles. At this stage we will ensure that the application is styled correctly and ready for the addition of i18n support. These steps are optional, but they will help to improve the overall look and feel of the application and make the integration of ngx-translate smoother and more successful.

Create Agnular project

I assume you already have the basic knowledge and you have your local environment ready to use AngularCLI. To create an empty Angular project using the AngularCLI, simply run the following command in the terminal window:



    ng new internation-demo

After running the command above, the ng client will ask you if you want to add Angular routing and what stylesheet format would you like to use. In my case, I decided to add the routing and use SCSS. In this tutorial, we won't use the routing and the UI will be created with Bootstrap, so it doesn't matter, which one will you choose.



? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

Add Bootstrap and flags icons libraries

In order to create the designs with ease, we will add Bootstrap and flag-icons libraries.

To add the libraries, run the following commands in terminal opened in the root of the project:



npm install bootstrap
npm i flag-icons

Then in order use the styles, classes, etc., we will add them to the angular.json (there are other ways as well, f.e. importing them to the index.html, etc. but I personally prefer to add them to the angular.json).

Open angular.json file of your project and include:



"node_modules/bootstrap/dist/css/bootstrap.min.css"

and



"node_modules/flag-icons/sass/flag-icons.scss",

into the projects->architect->build->styles array
and



"node_modules/bootstrap/dist/js/bootstrap.js"

into projects->architect->build->scripts array

Update the html and styles

Firstly, open the app.component.html and remove all the automatically generated code. Let's add our basic template that will be translated later on:



<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand">Internationalization</a>
    <div class="d-flex">
      <span class="fi fi-us me-2"></span>
      <span class="fi fi-de me-2"></span>
      <span class="fi fi-it me-2"></span>
      <span class="fi fi-es me-2"></span>
    </div>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h1>What is ngx-translate</h1>
  <p>
    NGX-Translate is an internationalization library for Angular. It lets you define translations for your content in
    different languages and switch between them easily.
  </p>
  <p>
    It gives you access to a service, a directive and a pipe to handle any dynamic or static content.
  </p>
  <p>
    NGX-Translate is also extremely modular. It is written in a way that makes it really easy to replace any part with a
    custom implementation in case the existing one doesn't fit your needs.
  </p>
</div>

Please consider the fact that the fixed navbar will overlay your other content, unless you add padding to the top of the body. Lets add the following code into the `styles.scss` file:



body {
    padding-top: 65px;
}

After completion of the optional steps described above, we can start the app using ng serve -o command and we will see:

Ngx Translate

Add ngx translate to the project

In order to use ngx-translate, first we have to install the npm module. Open a terminal in the root folder of your project and run the following command:



npm install @ngx-translate/core

The @ngx-translate/core provides the translation's fundamental procedures, such as the TranslateService and the translate pipe.

There is no loader accessible by default. Although setTranslation may be used to manually add translations, it is preferable to utilize a loader. You may either develop your own loader or use an existing one. You may, for example, use the TranslateHttpLoader to load translations from files using HttpClient. To use it, simple install the http-loader package with the following command:



npm install @ngx-translate/http-loader

The @ngx-translate/http-loader dynamically loads translation files from your web server.

Translation Module and HttpLoader Setup

Finally, in your Angular project, you may utilize ngx-translate. You must include TranslateModule.forRoot() in your application's base NgModule.

The forRoot static method is a convention that both offers and configures services. Make sure you only call this function in your application's root module, which is usually called AppModule. You can customize the TranslateModule using this method by supplying a loader, a parser, and/or a missing translations handler.



import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Since we are going to use the TranslateHttpLoader, we should also do the following changes in order to load our translations from "/assets/i18n/[lang].json":

Add the HttpLoaderFactory function, that is required for AOT (ahead of time) compilation in your project.
Add HttpClientModule to the imports array in the AppModule
Configure the TranslateModule

HttpLoaderFactory method:



// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

HttpClientModule & TranslateModule configuration



@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],
    bootstrap: [AppComponent]
})

Complete AppModule (app.module.ts) setup



import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Translation Service Setup

Since we have configured the TranslationModule and the TranslateHttpLoader, we can move to the next step and initialize the TranslateService of our application. Let's jump into the AppComponent (app.component.ts) and initialize our service in the constructor.

AppComponent (app.component.ts)




import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

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

  constructor(private translateService: TranslateService) {
    translateService.setDefaultLang('en');
    translateService.use('en');
  }
}

As you can see from the code above, we have initialized the translation service. On the other hand, we have also added two other things:

translateService.setDefaultLang('en'); - Adds a fallback language when a translation isn't found in the current language
translate.use('en'); - Specifies the language to use, if it isn't available, the current loader will be used to get them

Now let's start the application using the ng serve -o command and you shall see the following (if you have followed the optional steps):

The applications seems to work, but lets take a look at the browser console, where we have the following error:




Failed to load resource: the server responded with a status of 404 (Not Found)
Cannot GET /assets/i18n/en.json

That is not unexpected. We have set the default and the fallback language to be en and the HttpLoader tries to load them from the server but we've not created that file yet. We will fix this in the next step.

Creation of JSON Translation files

Our demo application will support four languages: english, german, italian and spanish. Every single language will be stored in a separate JSON file, so let's create one for each. We will place those files in the /assets/i18n/ as shown below:

Now, since we've created the JSON files for every language, let's fill them with data following this best practices:

create detailed keys
use capital letters for the keys
don't use translation text as IDs
separate keys with multiple words with underscore (_)

en.json



{
  "NAVBAR": {
    "TITLE": "Internationalization"
  },
  "MAIN_CONTENT": {
    "TITLE": "What is ngx-translate?",
    "DESC_P1": "NGX-Translate is an internationalization library for Angular. It lets you define translations for your content in different languages and switch between them easily.",
    "DESC_P2": "It gives you access to a service, a directive and a pipe to handle any dynamic or static content.",
    "DESC_P3": "NGX-Translate is also extremely modular. It is written in a way that makes it really easy to replace any part with a custom implementation in case the existing one doesn't fit your needs."
  }
}

de.json



{
  "NAVBAR": {
    "TITLE": "Internationalisierung"
  },
  "MAIN_CONTENT": {
    "TITLE": "Was ist ngx-translate?",
    "DESC_P1": "NGX-Translate ist eine Internationalisierungsbibliothek für Angular. Mit ihr können Sie Übersetzungen für Ihre Inhalte in verschiedenen Sprachen definieren und einfach zwischen ihnen wechseln.",
    "DESC_P2": "Es gibt Ihnen Zugriff auf einen Service, eine Direktive und eine Pipe, um jeden dynamischen oder statischen Inhalt zu verarbeiten.",
    "DESC_P3": "NGX-Translate ist auch extrem modular. Es ist so geschrieben, dass es sehr einfach ist, jeden Teil durch eine benutzerdefinierte Implementierung zu ersetzen, falls die vorhandene nicht Ihren Bedürfnissen entspricht."
  }
}

it.json



{
  "NAVBAR": {
    "TITLE": "Internazionalizzazione"
  },
  "MAIN_CONTENT": {
    "TITLE": "Cos'è ngx-translate?",
    "DESC_P1": "NGX-Translate è una libreria di internazionalizzazione per Angular. Consente di definire traduzioni per i contenuti in diverse lingue e di passare facilmente da una all'altra",
    "DESC_P2": "Permette di accedere a un servizio, una direttiva e una pipe per gestire qualsiasi contenuto dinamico o statico",
    "DESC_P3": "NGX-Translate è anche estremamente modulare. È scritto in modo tale da rendere molto semplice la sostituzione di qualsiasi parte con un'implementazione personalizzata, nel caso in cui quella esistente non sia adatta alle proprie esigenze."
  }
}

es.json



{
  "NAVBAR": {
    "TITLE": "Internacionalización"
  },
  "MAIN_CONTENT": {
    "TITLE": "¿Qué es ngx-translate?",
    "DESC_P1": "NGX-Translate es una librería de internacionalización para Angular. Te permite definir traducciones para tu contenido en diferentes idiomas y cambiar entre ellas fácilmente.",
    "DESC_P2": "Te da acceso a un servicio, una directiva y una tubería para manejar cualquier contenido dinámico o estático",
    "DESC_P3": "NGX-Translate es también extremadamente modular. Está escrito de tal forma que resulta realmente sencillo sustituir cualquier parte por una implementación personalizada en caso de que la existente no se ajuste a tus necesidades."
  }
}

If you reload the application now and check the browser console, you will see that the error isn't there anymore.

Translations usage in templates and code

Now our translation JSON files are ready, so we can jump into the AppComponent (app.component.html) and start using them by replacing the static texts with references to the keys in the JSON files. In the ngx-translate are described multiple ways to add the translations but we will focus on the most popular and recommended one - using translation pipe.

Ex.: {{'key_id' | translate}}

AppComponent (app.component.ts) with translations added



<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand">{{ "NAVBAR.TITLE" | translate }}</a>
    <div class="d-flex">
      <span class="fi fi-us me-2"></span>
      <span class="fi fi-de me-2"></span>
      <span class="fi fi-it me-2"></span>
      <span class="fi fi-es me-2"></span>
    </div>
  </div>
</nav>
<div class="container-fluid mt-3">
  <h1>{{ "MAIN_CONTENT.TITLE" | translate }}</h1>
  <p>
    {{ "MAIN_CONTENT.DESC_P1" | translate }}
  </p>
  <p>
    {{ "MAIN_CONTENT.DESC_P2" | translate }}
  </p>
  <p>
    {{ "MAIN_CONTENT.DESC_P3" | translate }}
  </p>
</div>

Bonus HTML Tags

We can use raw HTML tags within translations:

en/de/it/es.json



  ...
      "TITLE": "<a href='http://www.ngx-translate.com/'>What is ngx-translate?</a>"
  ...

And to render them, we simply using the innerHTML attribute with pipe:

AppComponent (app.component.ts)



  ...
  <h1 [innerHtml]="'MAIN_CONTENT.TITLE' | translate"></h1>
  ...

Runtime language changes

Now we have made all the configuration that we need, JSON files with the translations are created and the last thing that we are missing is to update the UI to switch between the language files we've created. To do so, let's do the following changes:

Add changeLanguage function into the AppComponent (app.component.ts):



  changeLanguage(language: string): void {
    this.translateService.use(language);
  }

Bind country flags to click event in the template (app.component.html):



<span class="fi fi-us me-2" (click)="changeLanguage('en')"></span>
<span class="fi fi-de me-2" (click)="changeLanguage('de')"></span>
<span class="fi fi-it me-2" (click)="changeLanguage('it')"></span>
<span class="fi fi-es me-2" (click)="changeLanguage('es')"></span>

Now reload the application and click on the different country flag to see the magic happening.

Congrats!!!👏👏👏
You have successfully created an Angular application that supports four different languages!

Bonus Get Browser Language

If you want to apply the browser language, you can use the getBrowserLang() function. Keep in mind that it is really important to preset the default language, so when the browser language isn't found in our /assets/i18n/ folder, the application will still have a fallback language.

AppComponent (app.component.ts)



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

import { TranslateService } from '@ngx-translate/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss'],

})

export class AppComponent {

  defaultLang = 'en';

constructor(private translateService: TranslateService) {

    translateService.setDefaultLang(this.defaultLang);

let browserLang = translateService.getBrowserLang();
if (browserLang) {
  translateService.use(browserLang);
}



}

changeLanguage(language: string): void {

    this.translateService.use(language);

  }

}

Summary

In conclusion, ngx-translate is a valuable tool for Angular developers who want to add internationalization to their projects. Its ease of use, comprehensive documentation, and active development community make it a reliable and effective solution for adding i18n support. Whether you are building a large, complex application or a simple single-page app, ngx-translate can help you reach a global audience by making your application accessible in multiple languages. So, if you are looking for a way to add i18n support to your Angular project, consider giving ngx-translate a try.

The source code of this article can be found in my Github repository.

Contact Me

Ngx-Charts: Data visualization library for Angular

Ivan Simeonov — Fri, 17 Feb 2023 17:36:44 +0000

Data visualization in Angular using ngx-charts

Table of content

Introduction
Supported chart types
Installation
Usage
- Vertical Bar Chart example
- Pie Chart example
- Line Chart example
- Number Cards example
Charts Preview
Best practices
Summary
Contact Me

Introduction

When it comes to building web applications, data visualization plays a crucial role in helping users make sense of complex data sets. This is where ngx-charts comes in handy. Ngx-charts is a popular charting library for Angular projects that provides a wide range of customizable and interactive charts. With ngx-charts, you can easily add stunning charts to your Angular applications, whether you're building a dashboard, a reporting tool, or any other data visualization solution. This article will explore how to get started with ngx-charts, the different types of charts it offers, and how to customize them to suit your project's needs. Whether you're a seasoned Angular developer or just getting started, this article will help you add powerful data visualization to your projects using ngx-charts.

Supported chart types

Ngx-Charts is a charting library for Angular that provides a wide variety of customizable and interactive chart types. The supported chart types in ngx-charts include line, area, bar, horizontal bar, pie, doughnut, gauge, heat map, force-directed graph, bubble chart and other variations.

The line and area charts are useful for showing trends over time or comparing values between two or more categories.
The bar and horizontal bar charts are suitable for comparing values across different categories or showing data in a ranking format.
The pie and doughnut charts are useful for showing data as parts of a whole and can help to quickly visualize data in a simple and concise way.
The gauge chart is great for displaying progress towards a specific goal or target.
The heat map chart can be used to show data distribution and patterns in a two-dimensional format, while the force-directed graph is ideal for visualizing complex relationships and network structures.
The bubble chart is suitable for showing relationships between three or more data dimensions.

Overall, choosing the appropriate chart type in ngx-charts depends on the type of data you have and the insights you want to convey. With a good understanding of the supported chart types and their strengths, ngx-charts can help you create powerful and visually appealing data visualizations in your Angular project.

Installation

In order to use ngx-charts, first we have to install the npm module. Open a terminal in the root folder of your project and run the following command:



npm i @swimlane/ngx-charts

Then we must also install the following peer-dependency:



npm install @types/d3 --save-dev

Now that we have the npm module installed in our project, we may utilize ngx-charts. In order to do so, open the AppModule(app.module.ts) and include the NgxChartsModule in the imports arrays:



import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgxChartsModule } from "@swimlane/ngx-charts";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    NgxChartsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Keep in mind to add BrowserAnimationsModule since charts are having animations as well.

Usage

I will show you some basic examples of the charts I commonly use. Many chart options are customizable, but we will focus only on a few. If you want to see what customizable properties are there for the different charts, you can see them described here. These charts are widely used in various industries, including business, finance, and science, and they can help you to effectively communicate complex data and insights.

I will give a brief description of a couple of the different properties:

view - the dimensions of the chart [width, height]. If left undefined, the chart will fit the parent container size
results - the chart data scheme - the color scheme of the chart (custom scheme available as well)
xAxis - show or hide the x axis
yAxis - show or hide the y axis
showGridLines - show or hide the grid lines (xAxis or yAxis must be shown in order to work)
Formatters - format the text. Examples can be seen in the code snippets below.
- dataLabelFormatting
- tooltipText
- yAxisTickFormatting
- xAxisTickFormatting
- valueFormatting
- etc.
Charts Properties Docs

Vertical Bar Chart example

Code Snippets:

app.component.html



    <ngx-charts-bar-vertical
      [results]="dataVBC"
      [view]="viewVBC"
      [animations]="animationsVBC"
      [legend]="legendVBC"
      [xAxis]="xAxisVBC"
      [yAxis]="yAxisLabelVBC"
      [showYAxisLabel]="showYAxisLabelVBC"
      [yAxisLabel]="yAxisLabelVBC"
      [dataLabelFormatting]="dataLabelFormatterVBC"
    ></ngx-charts-bar-vertical>

app.component.ts



  // Options for Vertical Bar Chart

  dataVBC = DummyData.totalNominalGDP;
  viewVBC: [number, number] = [800, 300];
  animationsVBC = false;
  legendVBC = true;
  xAxisVBC = true;
  yAxisVBC = true;
  showYAxisLabelVBC = true;
  yAxisLabelVBC = "Amount in Trillions ($)";

  dataLabelFormatterVBC(tooltipText: any) {
    return "$" + tooltipText + " trillion";
  }

Result:

Pie Chart example

Code Snippets:

app.component.html



    <ngx-charts-pie-chart
      [results]="dataPC"
      [view]="viewPC"
      [animations]="animationPC"
      [scheme]="colorSchemePC"
      [labels]="labelsPC"
      [doughnut]="doughnut"
      [tooltipText]="percentageFormatterPC"
    ></ngx-charts-pie-chart>

app.component.ts



  // Options for Pie Chart

  dataPC = DummyData.totalPopulation;
  viewPC: [number, number] = [700, 400];
  animationPC = true;
  colorSchemePC = "vivid";
  labelsPC = true;
  doughnut = true;

  percentageFormatterPC(data: any): string {
    return data.value + "%";
  }

Result:

Line Chart example

Code Snippets:

app.component.html



    <ngx-charts-line-chart
      [results]="dataLC"
      [view]="viewLC"
      [animations]="animationsLC"
      [showGridLines]="showGridLinesLC"
      [legend]="legendLC"
      [legendTitle]="legendTitleLC"
      [roundDomains]="roundDomainsLC"
      [xAxis]="true"
      [yAxis]="true"
      [yAxisTickFormatting]="currencyFormatterLC"
      [xAxisTickFormatting]="dateFormatterLC"
    ></ngx-charts-line-chart>

app.component.ts



  // Options for Line Chart

  dataLC = DummyData.annualWageSalary;
  viewLC: [number, number] = [700, 300];
  animationsLC = true;
  showGridLinesLC = true;
  legendLC = true;
  legendTitleLC = "Countries";
  roundDomainsLC = true;
  xAxisLC = true;
  yAxisLC = true;

  currencyFormatterLC(moneyAmount: any): string {
    const currencyFormat = new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    });
    return currencyFormat.format(moneyAmount);
  }

  dateFormatterLC(date: string): string {
    const datePipe = new DatePipe("en-US");
    let formatted = datePipe.transform(date);
    return formatted ? formatted : date;
  }

Result:

Number Cards example

Code Snippets:

app.component.html



    <ngx-charts-number-card
      [view]="viewNC"
      [animations]="animationsNC"
      [results]="dataNC"
      [scheme]="colorSchemeNC"
      [valueFormatting]="currencyFormatterNC"
    ></ngx-charts-number-card>

app.component.ts



  // Options for Number Cards
  dataNC = DummyData.highestAvgAnnualSalary;
  viewNC: [number, number] = [800, 150];
  animationsNC = true;
  colorSchemeNC = "fire";

  currencyFormatterNC(moneyAmount: any): string {
    const currencyFormat = new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    });
    return currencyFormat.format(moneyAmount.value);
  }

Result:

Data sets used for the charts can be found in data.ts:



export const totalNominalGDP = [
  {
    name: "USA",
    value: 23.17,
  },
  {
    name: "China",
    value: 16.28,
  },
  {
    name: "Japan",
    value: 5.15,
  },
  {
    name: "Germany",
    value: 4.25,
  },
  {
    name: "United Kingdom",
    value: 3.09,
  },
];

export const totalPopulation = [
  {
    name: "Rest",
    value: 53.24,
  },
  {
    name: "China",
    value: 18.47,
  },
  {
    name: "India",
    value: 17.7,
  },
  {
    name: "USA",
    value: 4.25,
  },
  {
    name: "Indonesia",
    value: 3.51,
  },
  {
    name: "Pakistan",
    value: 2.83,
  },
];

export const annualWageSalary = [
  {
    name: "USA",
    series: [
      {
        value: 39238,
        name: "2000-09-24T00:33:38.246Z",
      },
      {
        value: 45647,
        name: "2005-09-24T00:33:38.246Z",
      },
      {
        value: 53235,
        name: "2010-09-24T00:33:38.246Z",
      },
      {
        value: 59993,
        name: "2015-09-24T00:33:38.246Z",
      },
      {
        value: 71655,
        name: "2020-09-24T00:33:38.246Z",
      },
    ],
  },
  {
    name: "Bulgaria",
    series: [
      {
        value: 1910,
        name: "2000-09-24T00:33:38.246Z",
      },
      {
        value: 3030,
        name: "2005-09-24T00:33:38.246Z",
      },
      {
        value: 6180,
        name: "2010-09-24T00:33:38.246Z",
      },
      {
        value: 7110,
        name: "2015-09-24T00:33:38.246Z",
      },
      {
        value: 9320,
        name: "2020-09-24T00:33:38.246Z",
      },
    ],
  },
];

export const highestAvgAnnualSalary = [
  {
    name: "Luxembourg",
    value: 128169,
  },
  {
    name: "Switzerland",
    value: 94794,
  },
  {
    name: "Ireland",
    value: 87688,
  },
  {
    name: "Norway",
    value: 85358,
  },
  {
    name: "United States",
    value: 68309,
  },
];

Charts Preview

Developers can use the following URL - Ngx-Charts Showcase, to explore the different chart types and their customization options in ngx-charts. This URL leads to the ngx-charts demo page, which provides a variety of sample charts that you can interact with and customize.

Using the preview page, developers can experiment with different chart types, such as line, area, bar, pie, and gauge, and customize their appearance by changing colors, labels, and legends. The page also provides options to enable animations, tooltips, and legends, giving developers a better understanding of the different features available in ngx-charts.

Overall, the demo page is a great resource for developers who want to get a better understanding of the capabilities of ngx-charts and experiment with different chart types and customization options.

Best practices

When using ngx-charts in your Angular project, there are several best practices that you should follow to ensure that you are getting the most out of the library. Here are a few tips to keep in mind:

Keep your data clean and consistent: Ensure that your data is clean and consistent before passing it to ngx-charts. This will ensure that your charts are accurate and easy to understand.
Use appropriate chart types: Choose the appropriate chart type based on the data you want to visualize. Select the chart type that best presents your data and insights.
Customize the appearance: Customize the appearance of your charts to make them visually appealing and on-brand. Use colors, fonts, and layouts that are consistent with the rest of your application.
Optimize performance: Ensure that your charts are optimized for performance. Use lazy loading or pagination if you are displaying a large amount of data to prevent any performance issues.
Test thoroughly: Test your charts thoroughly across different devices and screen sizes to ensure that they are displayed correctly and are easily readable.

By following these best practices, you can create effective and visually appealing data visualizations using ngx-charts in your Angular project.

Summary

In conclusion, ngx-charts is a powerful and flexible charting library that can help you add sophisticated data visualization to your Angular projects. With a wide range of chart types, easy customization options, and excellent documentation, ngx-charts makes it easy to build stunning charts that bring your data to life. Whether you're building a data-rich dashboard or a custom reporting tool, ngx-charts can help you create a seamless and intuitive user experience. By following the tips and techniques discussed in this article, you can leverage ngx-charts to enhance the data visualization capabilities of your Angular applications and deliver better insights to your users.

The source code of this article can be found in my Github repository.

Contact Me

VS Code Setup for Frontend Devs

Ivan Simeonov — Thu, 09 Feb 2023 18:35:52 +0000

Introduction
Theme
Icons
Extensions
- Auto Rename Tag
- Auto Close Tag
- Code Spell Checker
- CSS Peek
- DotENV
- Error Lens
- ESLint
- GitLens
- HTML Boilerplate
- HTML CSS Support
- Import Cost
- Live Server
- Markdown Preview Enhanced
- Path Intellisense
- Prettier - Code Formatter
- Project Manager
- REST Client
- Trailing Spaces
- Turbo Console Log
- Version Lens
- Angular Language Service
- ES7 React Redux React Native snippets
- Docker
- Kubernetes
Settings
Conclusion
Contact Me

Introduction

In this article, we will explore my personal setup for Visual Studio Code, the popular open-source code editor. I will share the themes, icons, and extensions that I use on a daily basis to enhance my coding experience. Whether you are a seasoned developer or just starting out, this article will give you some insights and inspiration to optimize your own setup. So, let's dive in and see what makes my VS Code setup unique!

Theme

The VS Code theme I most often use is the Default Dark+ theme provided by VS Code default settings, but from time to time, I switch to the One Dark Pro. In general I prefer darker themes, so my eyes are not strained so much.

⬇️ Downlaod One Dark Pro

Icons

The icon pack that I use is the well-known Material Icon Theme. I love it because it supports almost every file extension and can be customized for everyone's needs.

⬇️ Download Material Icon Theme

Extensions

Below, I will be discussing the various extensions that I utilize in Visual Studio Code to enhance my coding experience.

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

⬇️ Download Auto Rename Tag

Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

⬇️ Download Auto Close Tag

Code Spell Checker

A basic spell checker that works well with code and documents.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

⬇️ Download Code Spell Checker

CSS Peek

This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code.

The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes, IDs and HTML tags). This includes:

Peek: load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
Go To: jump directly to the css file or open it in a new editor (F12)
Hover: show the definition in a hover over the symbol (Ctrl+hover)

In addition, it supports the Symbol Provider so you can quickly jump to the right CSS/SCSS/LESS code if you already know the class or ID name

⬇️ Download CSS Peek

DotENV

Syntax Highlighting support for Environment (.env) Files

⬇️ Download DotENV

Error Lens

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

⬇️ Download Error Lens

ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

ESLint is completely pluggable. Every single rule is a plugin and you can add more at runtime. You can also add community plugins, configurations, and parsers to extend the functionality of ESLint.

⬇️ Download ESLint

GitLens

GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.

Commit Graph

Worktrees

Git blame file

Git blame current line

Git blame status bar

⬇️ Download GitLens

HTML Boilerplate

This extension provides the standard HTML boilerplate code used in all web applications.

⬇️ Download HTML Boilerplate

HTML CSS Support

HTML id and class attribute completion for Visual Studio Code.

HTML id and class attribute completion.
Supports linked and embedded style sheets.
Supports template inheritance.
Supports additional style sheets.
Supports other HTML like languages.
Validates CSS selectors on demand.

⬇️ Download HTML CSS Support

Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.

⬇️ Download Import Cost

Live Server

Launch a local development server with live reload feature for static & dynamic pages.

⬇️ Download Live Server

Markdown Preview Enhanced

Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown.

⬇️ Download Markdown Preview Enhanced

Path Intellisense

Visual Studio Code plugin that autocompletes filenames.
To use Path Intellisense instead of the default autocompletion, the following configuration option must be added to your settings:

{ "typescript.suggest.paths": false }
{ "javascript.suggest.paths": false }

⬇️ Download Path Intellisense

Prettier - Code Formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

⬇️ Download Prettier - Code Formatter

Project Manager

It helps you to easily access your projects, no matter where they are located. Don't miss those important projects anymore.
You can define your own Projects (also called Favorites), or choose for auto-detect Git, Mercurial or SVN repositories, VSCode folders, or any other folder.

⬇️ Download Project Manager

REST Client

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.

⬇️ Download REST Client

Trailing Spaces

A VS Code extension that allows you to highlight trailing spaces and delete them in a flash!

⬇️ Download Trailing Spaces

Turbo Console Log

This extension make debugging much easier by automating the operation of writing meaningful log message.

⬇️ Download Turbo Console Log

Version Lens

This extension shows version information when opening a package or project.

⬇️ Download Version Lens

Angular Language Service

This extension provides a rich editing experience for Angular templates, both inline and external templates.

⬇️ Download Angular Language Service

ES7 React Redux React Native snippets

JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code.

⬇️ Download ES7+ React/Redux/React-Native snippets

Docker

The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container.

⬇️ Download Docker

Kubernetes

The extension for developers building applications to run in Kubernetes clusters and for DevOps staff troubleshooting Kubernetes applications.
Works with any Kubernetes anywhere (Azure, Minikube, AWS, GCP and more!).

⬇️ Download Kubernetes

Settings

The JSON code below, shows my current VS Code settings:

// settings.json

{
  "breadcrumbs.enabled": true,
  "breadcrumbs.icons": true,
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.fontSize": 14,
  "editor.fontFamily": "Menlo, Monaco, 'Courier New', monospace",
  "editor.fontWeight": "normal",
  "editor.wordWrap": "on",
  "editor.autoClosingBrackets": "always",
  "editor.autoClosingQuotes": "always",
  "editor.autoClosingDelete": "always",
  "editor.codeLens": true,
  "editor.codeLensFontSize": 12,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.highlightActiveBracketPair": true,
  "editor.guides.bracketPairs": "active",
  "editor.minimap.size": "fit",
  "editor.minimap.scale": 1,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "editor.tabSize": 2,
  "editor.fastScrollSensitivity": 6,
  "editor.renderWhitespace": "none",
  "editor.accessibilitySupport": "off",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "errorLens.enabled": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 500,
  "files.defaultLanguage": "${activeEditorLanguage}",
  "git.autofetch": true,
  "html.format.indentInnerHtml": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "keyboard.touchbar.enabled": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.port": 4201,
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "terminal.integrated.fontSize": 14,
  "workbench.colorTheme": "Default Dark+",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.editor.enablePreview": false,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.editor.wrapTabs": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "redhat.telemetry.enabled": false,
  "typescript.suggest.paths": false,
  "javascript.suggest.paths": false
}

Conclusion

In conclusion, I shared my personalized Visual Studio Code setup, including the themes, icons, and extensions that I use on a daily basis. These tools help me to streamline my workflow, increase productivity, and provide a visually appealing interface. The combination of these elements is tailored to meet my specific needs and enhance my overall experience with the code editor. By sharing this setup, I hope to inspire others to customize their own VS Code environment and find the tools that work best for them.

Forem: Ivan Simeonov

Ngx-Translate: Internationalization (i18n) library for Angular

Internationalization in Angular using ngx-translate

Table of content

Introduction

Optional steps

Create Agnular project

Add Bootstrap and flags icons libraries

Update the html and styles

Please consider the fact that the fixed navbar will overlay your other content, unless you add padding to the top of the body. Lets add the following code into the styles.scss file:

Ngx Translate

Add ngx translate to the project

Translation Module and HttpLoader Setup

Translation Service Setup

Creation of JSON Translation files

Translations usage in templates and code

Bonus HTML Tags

Runtime language changes

Bonus Get Browser Language

Summary

Contact Me

Ngx-Charts: Data visualization library for Angular

Data visualization in Angular using ngx-charts

Table of content

Introduction

Supported chart types

Installation

Usage

Vertical Bar Chart example

Code Snippets:

Result:

Pie Chart example

Code Snippets:

Result:

Line Chart example

Code Snippets:

Result:

Number Cards example

Code Snippets:

Result:

Charts Preview

Best practices

Summary

Contact Me

VS Code Setup for Frontend Devs

Table of Contents

Introduction

Theme

Icons

Extensions

Auto Rename Tag

Auto Close Tag

Code Spell Checker

CSS Peek

DotENV

Error Lens

ESLint

GitLens

Commit Graph

Worktrees

Git blame file

Git blame current line

Git blame status bar

HTML Boilerplate

HTML CSS Support

Import Cost

Live Server

Markdown Preview Enhanced

Path Intellisense

Prettier - Code Formatter

Project Manager

REST Client

Trailing Spaces

Turbo Console Log

Version Lens

Angular Language Service

ES7 React Redux React Native snippets

Docker

Kubernetes

Settings

Please consider the fact that the fixed navbar will overlay your other content, unless you add padding to the top of the body. Lets add the following code into the `styles.scss` file: