-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6c8aff5
commit e14da72
Showing
7 changed files
with
235 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,193 @@ | ||
| <div class="content-section documentation"> | ||
| <h1>I18N</h1> | ||
| <p>The i18n API allows setting translations globally for the components and integration with translation libraries.</p> | ||
|
|
||
| <h5>PrimeNGConfig</h5> | ||
| <p>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 <i>setTranslation</i> function is used to change the values by passing a <i>Translation</i> object.</p> | ||
|
|
||
| <app-code lang="typescript" ngNonBindable ngPreserveWhitespaces> | ||
| 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 | ||
| }); | ||
| } | ||
| } | ||
| </app-code> | ||
|
|
||
| <h5>ngx-translate</h5> | ||
| <p>i18n API can easily be integrated with 3rd party libraries such as ngx-translate that even allows | ||
| dynamically changing the language in the application.</p> | ||
|
|
||
| <h5>en.json</h5> | ||
| <app-code lang="typescript" ngNonBindable ngPreserveWhitespaces> | ||
| { | ||
| "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" | ||
| } | ||
| } | ||
| </app-code> | ||
|
|
||
| <app-code lang="typescript" ngNonBindable ngPreserveWhitespaces> | ||
| 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)); | ||
| } | ||
| } | ||
| </app-code> | ||
|
|
||
| <h5>Translation</h5> | ||
| <p>Translation API consists of various values used throughout the component library.</p> | ||
|
|
||
| <div class="doc-tablewrapper"> | ||
| <table class="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Key</th> | ||
| <th>Value</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>startsWith</td> | ||
| <td>Starts with</td> | ||
| </tr> | ||
| <tr> | ||
| <td>contains</td> | ||
| <td>Contains</td> | ||
| </tr> | ||
| <tr> | ||
| <td>notContains</td> | ||
| <td>Not contains</td> | ||
| </tr> | ||
| <tr> | ||
| <td>endsWith</td> | ||
| <td>Ends with</td> | ||
| </tr> | ||
| <tr> | ||
| <td>equals</td> | ||
| <td>Equals</td> | ||
| </tr> | ||
| <tr> | ||
| <td>notEquals</td> | ||
| <td>Not equals</td> | ||
| </tr> | ||
| <tr> | ||
| <td>lt</td> | ||
| <td>Less than</td> | ||
| </tr> | ||
| <tr> | ||
| <td>lte</td> | ||
| <td>Less than or equal to</td> | ||
| </tr> | ||
| <tr> | ||
| <td>gt</td> | ||
| <td>Greater than</td> | ||
| </tr> | ||
| <tr> | ||
| <td>gte</td> | ||
| <td>Great then or equals</td> | ||
| </tr> | ||
| <tr> | ||
| <td>is</td> | ||
| <td>Is</td> | ||
| </tr> | ||
| <tr> | ||
| <td>isNot</td> | ||
| <td>Is not</td> | ||
| </tr> | ||
| <tr> | ||
| <td>before</td> | ||
| <td>Before</td> | ||
| </tr> | ||
| <tr> | ||
| <td>after</td> | ||
| <td>After</td> | ||
| </tr> | ||
| <tr> | ||
| <td>clear</td> | ||
| <td>Clear</td> | ||
| </tr> | ||
| <tr> | ||
| <td>apply</td> | ||
| <td>Apply</td> | ||
| </tr> | ||
| <tr> | ||
| <td>matchAll</td> | ||
| <td>Match All</td> | ||
| </tr> | ||
| <tr> | ||
| <td>matchAny</td> | ||
| <td>Match Any</td> | ||
| </tr> | ||
| <tr> | ||
| <td>addRule</td> | ||
| <td>Add Rule</td> | ||
| </tr> | ||
| <tr> | ||
| <td>removeRule</td> | ||
| <td>Remove Rule</td> | ||
| </tr> | ||
| <tr> | ||
| <td>accept</td> | ||
| <td>Yes</td> | ||
| </tr> | ||
| <tr> | ||
| <td>reject</td> | ||
| <td>No</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import {Component} from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| templateUrl: './i18n.component.html' | ||
| }) | ||
| export class I18NComponent { | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters