From e14da72e9541ec9434a3c3d32e35e72109238acd Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Mon, 9 Nov 2020 16:33:13 +0300 Subject: [PATCH] Add i18n documentation --- src/app/showcase/app-routing.module.ts | 1 + src/app/showcase/app.menu.component.ts | 1 + .../components/i18n/i18n-routing.module.ts | 15 ++ .../components/i18n/i18n.component.html | 193 ++++++++++++++++++ .../components/i18n/i18n.component.ts | 8 + .../showcase/components/i18n/i18n.module.ts | 17 ++ .../components/setup/setup.component.html | 3 - 7 files changed, 235 insertions(+), 3 deletions(-) create mode 100755 src/app/showcase/components/i18n/i18n-routing.module.ts create mode 100755 src/app/showcase/components/i18n/i18n.component.html create mode 100755 src/app/showcase/components/i18n/i18n.component.ts create mode 100755 src/app/showcase/components/i18n/i18n.module.ts diff --git a/src/app/showcase/app-routing.module.ts b/src/app/showcase/app-routing.module.ts index e8a6f213f39..42fcf92cce4 100755 --- a/src/app/showcase/app-routing.module.ts +++ b/src/app/showcase/app-routing.module.ts @@ -49,6 +49,7 @@ import { HomeComponent } from './components/home/home.component'; {path: 'inputtext', loadChildren: () => import('./components/inputtext/inputtextdemo.module').then(m => m.InputTextDemoModule)}, {path: 'inputgroup', loadChildren: () => import('./components/inputgroup/inputgroupdemo.module').then(m => m.InputGroupDemoModule)}, {path: 'inputtextarea', loadChildren: () => import('./components/inputtextarea/inputtextareademo.module').then(m => m.InputTextareaDemoModule)}, + {path: 'i18n', loadChildren: () => import('./components/i18n/i18n.module').then(m => m.I18NModule)}, {path: 'keyfilter', loadChildren: () => import('./components/keyfilter/keyfilterdemo.module').then(m => m.KeyFilterDemoModule)}, {path: 'listbox', loadChildren: () => import('./components/listbox/listboxdemo.module').then(m => m.ListboxDemoModule)}, {path: 'lts', loadChildren: () => import('./components/lts/lts.module').then(m => m.LTSModule)}, diff --git a/src/app/showcase/app.menu.component.ts b/src/app/showcase/app.menu.component.ts index 4f70c6c0180..4aca29ec92e 100644 --- a/src/app/showcase/app.menu.component.ts +++ b/src/app/showcase/app.menu.component.ts @@ -12,6 +12,7 @@ declare let gtag: Function;
General
Get Started + I18N Migration Guide Source Code Store diff --git a/src/app/showcase/components/i18n/i18n-routing.module.ts b/src/app/showcase/components/i18n/i18n-routing.module.ts new file mode 100755 index 00000000000..829eada276a --- /dev/null +++ b/src/app/showcase/components/i18n/i18n-routing.module.ts @@ -0,0 +1,15 @@ +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {I18NComponent} from './i18n.component'; + +@NgModule({ + imports: [ + RouterModule.forChild([ + {path:'',component: I18NComponent} + ]) + ], + exports: [ + RouterModule + ] +}) +export class I18NRoutingModule {} \ No newline at end of file diff --git a/src/app/showcase/components/i18n/i18n.component.html b/src/app/showcase/components/i18n/i18n.component.html new file mode 100755 index 00000000000..fff67698765 --- /dev/null +++ b/src/app/showcase/components/i18n/i18n.component.html @@ -0,0 +1,193 @@ +
+

I18N

+

The i18n API allows setting translations globally for the components and integration with translation libraries.

+ +
PrimeNGConfig
+

A translation is applied using the PrimeNGConfig instance so begin with injecting it. A common location is the application root to initalize the default language used by the components. + English is the default language and setTranslation function is used to change the values by passing a Translation object.

+ + +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { PrimeNGConfig } from 'primeng/api'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html' +}) +export class AppComponent implements OnInit, OnDestroy { + + constructor(private config: PrimeNGConfig) {} + + ngOnInit() { + this.config.setTranslation({ + accept: 'Accept', + reject: 'Cancel', + //translations + }); + } +} + + +
ngx-translate
+

i18n API can easily be integrated with 3rd party libraries such as ngx-translate that even allows + dynamically changing the language in the application.

+ +
en.json
+ +{ + "primeng": { + "startsWith": "Starts with", + "contains": "Contains", + "notContains": "Not contains", + "endsWith": "Ends with", + "equals": "Equals", + "notEquals": "Not equals", + "lt": "Less than", + "lte": "Less than or equal to", + "gt": "Greater than", + "gte": "Great then or equals", + "is": "Is", + "isNot": "Is not", + "before": "Before", + "after": "After", + "clear": "Clear", + "apply": "Apply", + "matchAll": "Match All", + "matchAny": "Match Any", + "addRule": "Add Rule", + "removeRule": "Remove Rule", + "accept": "Yes", + "reject": "No" + } +} + + + +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { PrimeNGConfig } from 'primeng/api'; +import { TranslateService } from '@ngx-translate/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html' +}) +export class AppComponent implements OnInit, OnDestroy { + + constructor(private config: PrimeNGConfig, private translateService: TranslateService) {} + + ngOnInit() { + this.translateService.setDefaultLang('en'); + } + + translate(lang: string) { + this.translateService.use(lang); + this.translateService.get('primeng').subscribe(res => this.config.setTranslation(res)); + } +} + + +
Translation
+

Translation API consists of various values used throughout the component library.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyValue
startsWithStarts with
containsContains
notContainsNot contains
endsWithEnds with
equalsEquals
notEqualsNot equals
ltLess than
lteLess than or equal to
gtGreater than
gteGreat then or equals
isIs
isNotIs not
beforeBefore
afterAfter
clearClear
applyApply
matchAllMatch All
matchAnyMatch Any
addRuleAdd Rule
removeRuleRemove Rule
acceptYes
rejectNo
+
+ +
diff --git a/src/app/showcase/components/i18n/i18n.component.ts b/src/app/showcase/components/i18n/i18n.component.ts new file mode 100755 index 00000000000..e5f66ab83b3 --- /dev/null +++ b/src/app/showcase/components/i18n/i18n.component.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + +@Component({ + templateUrl: './i18n.component.html' +}) +export class I18NComponent { + +} \ No newline at end of file diff --git a/src/app/showcase/components/i18n/i18n.module.ts b/src/app/showcase/components/i18n/i18n.module.ts new file mode 100755 index 00000000000..aa5455da514 --- /dev/null +++ b/src/app/showcase/components/i18n/i18n.module.ts @@ -0,0 +1,17 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {I18NComponent} from './i18n.component'; +import {I18NRoutingModule} from './i18n-routing.module'; +import {AppCodeModule} from '../../app.code.component'; + +@NgModule({ + imports: [ + CommonModule, + AppCodeModule, + I18NRoutingModule + ], + declarations: [ + I18NComponent + ] +}) +export class I18NModule {} \ No newline at end of file diff --git a/src/app/showcase/components/setup/setup.component.html b/src/app/showcase/components/setup/setup.component.html index a655a721889..6b0144b2f01 100755 --- a/src/app/showcase/components/setup/setup.component.html +++ b/src/app/showcase/components/setup/setup.component.html @@ -15,9 +15,6 @@
Download
npm install primeicons --save -
Load Configuration
-

PrimeNG is distributed in commonjs format, a module manager of your choice is required and this guide provides samples for SystemJS, WebPack and Angular CLI.

-
Import

UI components are configured as modules, once PrimeNG is downloaded and configured, modules and apis can be imported from primeng/{module} shorthand in your application code. Documentation of each component states the import path.