Angular 8 ngx-translate load translation JSON file from URL - json

I have a problem with ngx-translate. I'm making a component where I would like to pass an URL with JSON file with translations. For now, all translations are gathered from /assets/i18n/ directory. My goal is to not place any translations to this folder, but to provide my component with #Input decorator and to pass URL to this input with the whole translation file.
This is what I managed to achieve right now:
In my app.module.ts file I have this function:
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, 'http://127.0.0.1:8080/', '.json');
}
and this is working fine. I have passed my test URL as second parameter to TranslateHttpLoader function. But in my case, I don't want to hardcode this second parameter in my app.module.ts. I need to pass URL for this parameter. In case I remove this parameter from this function, my translations are not working at all. I have tried with passing this through a service, but everytime I receive an undefined property for this URL.
In my main component I'm setting this in constructor:
translate.getTranslation('http://127.0.0.1:8080/en.json');
Can anyone help with setting this? I could not find any solution for that.

Related

Angular: how to call a function from i18n JSON file

I have my i18n in a JSON file and I need to call a function from a piece of string.
I'll give you an example:
"give_me_feedback": "Do you need something else? <button onclick=\"sendFeedback()\">Send us your feedback</button>"
I call this message in my component, just like that:
<p [innerHTML]="'give_me_feedback | translate'"></p>
Usually, when I put a class or a button inside the i18n JSON file works fine, but, in this case, where I am calling a function specifically, it is not working.
Do you know if it is possible to do that from a JSON file? Or maybe I can put some kind of identifier and then call it from the component? I know that it could work in javascript, but I am not getting a good results in Angular. I' am using Angular 14.1.1
Thank you in advance!

Defining a type in the routes file

I want to be able to send a JSON to a method on my controller and parse that to an object but to be able to do that I have to define the method on my "routes" file as well.
POST /retornaParametros
controllers.HomeController.retornaParametros(parametro:Dog)
I thought this would work but it doesn't. How do i tell my routes file to accept the Dog object
You should be using Query binder
Refer https://www.playframework.com/documentation/2.6.x/ScalaRequestBinders#querystringbindable

Not able to use a fake back end server for angular 2 . Choosing in-memory-web-api is not working for me

I am building a fake back end server for my Angular2 application and I want to use for this purpose "angular2-in-memory-web-api". I have created the service for my http request and also a typescript file with createDb() method
I am following heroes demo of angular documentation and I do not understand what is the meaning of :
private heroesUrl = 'api/heroes'; // URL to web api . I do not find this file and I know it should be a json file
constructor(private http: Http) { }
getHeroes(): Promise<Hero[]> {
return this.http.get(this.heroesUrl)
.toPromise()
.then(response => response.json().data as Hero[])
.catch(this.handleError);
}
In my application I have created the InMemoryDbService and all datas are inside createDb() method but also I have a json file in my api folder like api/products.
Now when I run the application I got the error "Collection not found". If I comment out the code about InMemoryWebApi I am able to retrieve all the products. I could have gone with the example of json file but I need to do also put, post, get(id:number) requests and I am not able to do it with the usage of json file.
I am wondering now win the Angular2 demos which can be found on https://angular.io/docs/ts/latest/tutorial/toh-pt6.html# I do not see any file on api/heroes.
Does it mean that this path does not exist, or if it exists is it an empty json file? I have tried to delete the json file, also just do it an empty file but still it is not working.
Note: The code is programmatically ok

Receive JSON post

I am using $routeProvider to set a route like
when('/grab/:param1/:param2', {
controller: 'someController',
templateUrl: "templates/someTemplate.html",
}).
Then in the someController I can read the parameters with $routeParams.param1.
How can I receive a JSON POST instead so I donĀ“t have to use params in the URL ?
Is there something I can use in the controller e.g $request.postData ?
EDIT: I'll try to make it more clear
Instead of receiving param1 and param2 (that are in the URL of a GET call) and then use $routeParams to read them and use them in my controller, I would like to receive a JSON object (which of course stays in a POST request) and have that object available in my controller.
I finally got the problem. There is no PHP or whatever server side script on mywebsite.com that can get the JSON object (POST) and JavaScript by it self cannot as well. See also this.
You probably want to pass a service to the resolve option of the route in the route provider. The service should implement $http and fetch the json. A resolve option must complete the fetch before the controller initializes. The resolve will also make the json data available in the $scope of the controller.
Setting this up the first time is not trivial, but it is repeatable and also one of the most common ways to pass data from an http request to an Angular controller.
Take a look at this answer: AngularJS: factory $http.get JSON file

Navigate to viewModel and pass Model value

I am getting the data from server in JSON and I am converting that to my viewModal. Now I am loading the a new view using return router.navigate('results'). But at the same time I want to pass the viewModel which I created from the JSON object to be passed to this view. By default the "results" viewModel is getting called but it is having blank values.
A small code snippet will be helpful as I am new to Durandal JS.
The best answer I have is to store that information in a separate module, like so:
storage.js
define(function(require) { return []; });
viewmodel.js
define(['storage'], function(storage) {
$.get('uri', function(data) {
data.forEach(function(obj) {
storage.push(obj);
});
});
});
This is not the most elegant solution. I'm really interested if there is a clean way to pass data from and to separate view models on activation, but so far I have found none.
Ended up finally something like this.
In the module where I want to navigate, I created an "Initialize" function which accepts a JSON object. Using this JSON object I initialized all properties in the viewModel.
From the page from where I have to navigate there I did a "require" on the module where I want to navigate next. Then I called the "Initialize" method and passed my JSON object.
After this I used router.navigate method to go that module.
This way when I navigated, I got all the values which I wanted to pass from one view to other. Hope this approach will help someone else.
The answer from Matthew is certainly similar to the way that I currently do it, once the data is held within your separate module (i have a path called modules/data/someDataStorage) you can use either events or a knockout observable to make the data update through to your view models.
In your case I would make updates to your shared module to store information on your request and then on the activation of your results module, go and get the data from that shared module.