Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented the Localization using ngx-translate Module #830

Merged
merged 1 commit into from Apr 11, 2017
Merged

Implemented the Localization using ngx-translate Module #830

merged 1 commit into from Apr 11, 2017

Conversation

ramsunvtech
Copy link

@ramsunvtech ramsunvtech commented Mar 11, 2017

  • Localization Module base Setup.
  • Implemented in the Page Heading, Breadcrumb and Menu Link Title, Dashboard and one Form Element.
  • What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
    Localization Feature to Keep text in one file and that can be changed according to the country and language.

  • What is the current behavior? (You can also link to an open issue here)
    All Text Labels are hard coded in the Code.

  • What is the new behavior (if this is a feature change)?
    Few Page's Text Labels are moved to one file and its dynamic according to the country and language.

  • Other information:
    Currently implemented with ngx-translate for basic blocks. if this implementation is fine, please goahead and merge so that i can complete this for the entire ng2-admin.

@ramsunvtech
Copy link
Author

Team,

@lexzhukov, @nnixaa,, Any Update on this PR ?

@@ -1,15 +1,15 @@
<li *ngIf="!menuItem.hidden" [title]="menuItem.title" [ngClass]="{'al-sidebar-list-item': !child, 'ba-sidebar-sublist-item': child, 'selected': menuItem.selected && !menuItem.expanded, 'with-sub-menu': menuItem.children, 'ba-sidebar-item-expanded': menuItem.expanded}">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be [title]="menuItem.title | translate" to display correct text when hover on menu item.
Btw, Thanks for great work!

@ramsunvtech
Copy link
Author

Fixed the Attribute Value to get translated. PFA Screenshot.

fix-screen

@nnixaa
Copy link
Collaborator

nnixaa commented Apr 8, 2017

Hey @ramsunvtech, many thanks! @lexzhukov let's merge this once you have time.

@ramsunvtech
Copy link
Author

ramsunvtech commented Apr 8, 2017 via email

@ManhLQ
Copy link

ManhLQ commented Apr 8, 2017

@ramsunvtech ,

I don't know why translation work on menu & shared components but not in detail pages (ex: login).
If I use as pipe, always show error pipe not found.
If I use as directive, nothing happen. The text just display key name.

translate-err

Login.html

<div class="offset-sm-2 col-sm-10">
     <button [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth">{{'pages.login.signin' | translate}}</button>
     <a routerLink="/login" class="forgot-pass">Forgot password?</a>
</div>

checkboxInputs.html

<label class="radio-inline custom-radio nowrap">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <span translate>{{'general.option1'}}</span>
</label>

Did u try to translate everywhere in project? Do you have any suggestion? It took me days and I still stuck in that.

Best regards,

@ramsunvtech ramsunvtech changed the title Implemented the Localization using ng2-translate Module Implemented the Localization using ngx-translate Module Apr 9, 2017
@ramsunvtech
Copy link
Author

ramsunvtech commented Apr 9, 2017

@ManhLQ, My PR is base setup not updated the whole project. Once its merged. i will raise PR block by block which will have less time to review and get things available in ng-admin bit quickly.

Solution

You should import app.translate module in to your custom module. Check this PR which has implementation for dashboard and forms pages which i added. the same checkbox label is working.

Why we need to include in every module?

Since we don't have any shared Module which has translate module and other common module.

@ramsunvtech
Copy link
Author

@nnixaa / @lexzhukov, Its been a month for this feature to get reviewed and get merged.

@nnixaa nnixaa requested a review from lexzhukov April 9, 2017 14:44
package.json Outdated
@@ -18,6 +18,8 @@
"@angularclass/conventions-loader": "1.0.13",
"@angularclass/hmr": "1.2.2",
"@angularclass/hmr-loader": "3.0.2",
"@ngx-translate/core": "^6.0.1",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, use fixed version of the dependencies and install new dependencies through yarn.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will update it

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the fixed version but yarn command for @ngx-translate has some issues.

$ yarn add git@github.com:akveo/ng2-admin.git
yarn add v0.22.0
[1/4] Resolving packages...
error Command failed.
Exit code: 128
Command: git
Arguments: clone github.com:akveo/ng2-admin.git C:\Users\vramamoorthy\AppData\Local\Yarn\cache\v1\.tmp\01867858a5cc6b0b0eed6a441c29c8c6
Directory: D:\Projects\ng2-admin
Output:
Cloning into 'C:\Users\vramamoorthy\AppData\Local\Yarn\cache\v1\.tmp\01867858a5cc6b0b0eed6a441c29c8c6'...
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
$ yarn add @ngx-translate/core
yarn add v0.22.0
[1/4] Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@ngx-translate/core: Not found".
info If you think this is a bug, please open a bug report with the information provided in "D:\\Projects\\ng2-admin\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
``

…adcrumb and Menu Link Titles

Removed the Test EN Locale File
Fixed the Build Error
Updated the Translate for HTML Attribute Values
Upgraded from ng2-translate to ngx-translate and updated to the Dashboard and Form Pages
Fixed the Build Issue by Typo
Updated the Fixed Version for @ngx-translate/core
@lexzhukov lexzhukov merged commit 627d62d into akveo:master Apr 11, 2017
@lexzhukov
Copy link
Contributor

@ramsunvtech thanks for your PR.

@ramsunvtech
Copy link
Author

@lexzhukov: You are welcome

AlbertXingZhang added a commit to AlbertXingZhang/ng2-admin that referenced this pull request Apr 12, 2017
AlbertXingZhang added a commit to AlbertXingZhang/ng2-admin that referenced this pull request Apr 13, 2017
AlbertXingZhang added a commit to AlbertXingZhang/ng2-admin that referenced this pull request Apr 24, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants