Internationalization in Angular Circular gauge component
18 Nov 20222 minutes to read
Circular gauge provide supports for internationalization for below gauge elements.
- Axis label.
- Tooltip.
For more information about number formatter you can refer
internationalization
.
Globalization
Globalization is the process of designing and developing a component that works in different cultures/locales.
Internationalization library is used to globalize number in CircularGauge component using format
property in labelStyle
.
Numeric Format
In the below example axis labels are globalized
to EUR.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
template:
`<ejs-circulargauge id="circular-container">
<e-axes>
<e-axis [labelStyle]="labelStyle"></e-axis>
</e-axes>
</ejs-circulargauge>`
})
export class AppComponent implements OnInit {
public labelStyle: Object;
ngOnInit(): void {
// Initialize objects.
this.labelStyle= {
// Label format as currency.
format: 'c'
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CircularGaugeModule } from '@syncfusion/ej2-angular-circulargauge';
import { loadCldr, L10n, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
setCulture('de');
setCurrencyCode('EUR');
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, CircularGaugeModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);