It's nice to change one place that reflects everywhere in Angular app it gives you a good feeling on having control on your app.
I have to change format of numbers to be in DE format for everywhere in an Angular13 app,
Say I have this in the TS file:
const number = 42342.42;
then in the HTML template file:
instead of having {{number}} I change it to {{number.toLocaleString('de')}}
but we have "tons" of this line in the whole app, is there a way to change the template rendering of numbers to be by default formatted with .toLocaleString('de') or with any other way of formatting so there's no need to do hundreds of lines of changes in Angular app?
The closest thing to a global solution for your problem would be creating a prototype format for number. But you'd still have to call a method.
Number.prototype.format = function() {
return this.valueOf().toLocaleString('de')
}
const number = 42342.42;
console.log(number.format())
Related
I currently have a dlv variable to store "First Name" (gtm.element.2.value) which is working correctly.
I also a dlv to store "D.O.B." which is also working correctly - gtm.element.5.value (this is formatted MM/DD/YYYY).
However, I'd like to only show the first initial in the First Name dlv and the Year in the DOB dlv. I'm thinking of utilizing a Custom JS variable but am open to ideas if there is an easier route.
Can anyone help provide what that Custom JS variable would look like? I've been searching for some examples but not having luck with this specific example.
Appreciate the help in advance!
To get the first initial (i.e. first character) of the First Name variable, you can indeed use a Custom JavaScript variable with this:
function() {
return {{first_name}}[0]; // Replace with the actual DLV reference
}
Similarly, to get just the year (YYYY) of the D.O.B., you can use a Custom JS variable:
function() {
return {{date_of_birth}}.split('/').pop(); // Replace with the actual DLV reference
}
Obviously you might want to add some checks to make sure the input is in a predictable format. For example, you might want to check that {{first_name}} is a string of non-zero length, and you might want to check that {{date_of_birth}} actually contains a date string with slash as the separator.
How come I can't translate dynamically resp. using a variable with i18next?
For example in my JS-file I got this:
Here I use a variable and assign it to the i18n function and it doesn't work:
//this does not work:
var dynamicTranslation = "myText.toBetranslated";
console.log("translation dynamic ", !{JSON.stringify(t(dynamicTranslation))});
Here I hardcoded the string from above directly into the i18n function and it does work:
//inserted string is the same string as in dynamic translation but this does work:
console.log("translation static ", !{JSON.stringify(t("myText.toBetranslated"))});
As a result I get:
translation dynamic
translation static correct Translation
In order to solve it, I tried to solve it by playing around with setTimeout:
setTimeout(function() {console.log("time out translation: " + !{JSON.stringify(t(dynamicTranslation))})}, 2000);
But it would still show an empty result:
time out translation:
It's jade syntax. The first code didn't work because it is rendered with jade at the back end site. At that point jade doesn't take the JS part into consideration but only renders it and pushes the result (along with the untouched JS code) to the front end. Therefore the part with the variable inside the t()-function is not translated, because it doesn't take the JS code into consideration.
I am currently trying to learn how to use Angular and I was tasked with rewriting an existing functional page to use Angular.
One of our core functionalities lies with translating strings with a JavaScript function, however, this translate method is only supposed to be called after the translations strings are loaded into the script, and that loading is done asynchronously.
We currently use callbacks to achieve this behavior, but due to Angular nature (at least in my understanding) my data is displayed as soon as the page is rendered.
I have the to be translated strings, but I wanted to display the translated strings in my table, and for that I tried creating a filter "translate" that would call my existing translate method and return its value. What I believe it's happening is that at the moment the filter gets called, I still don't have the translation strings yet, as they may not be loaded already.
What I expected was to something like {{ object.name | translate }}, where object.name is a to be translated string like "access.granted", to give me the corresponding translation string for a given language, for instance "You were given permission to access this area.".
I am not positive this is the best way to achieve what I want, I haven't had much time to delve deep into angular yet, but one requirement I have is, I cannot change the way translations are dealt with, since we have a huge system already using that code, and the new pages using angular must be fully compatible.
What I have tried: (my current filter code)
function ngTranslate (text, backoff) {
if (backoff != undefined)
backoff = 100;
if (backoff > 5000)
backoff = 5000;
if (internationalization != undefined && Object.keys(internationalization.messages).length > 0)
return translate(text);
setTimeout(function () {
return ngTranslate(text, backoff * 2);
}, backoff);
}
app.filter("translate", function ($log) {
return function (key) {
$log.info(key);
return ngTranslate(key);
};
});
What I tried to achieve here was verify if the translations strings are already loaded, and if not, try again in a short time, but even after the translation strings loaded, nothing showed on the table.
Here is my table code:
<tr data-ng-repeat="product in productList">
<td>{{ product.name | translate }}</td>
</tr>
Thanks a lot in advance
well, one of the ways i can think of, is to bootstrap your module, load the strings and then manually start the angular app in the callback function
Use this function to manually start up angular application
https://docs.angularjs.org/api/ng/function/angular.bootstrap
That way you can insure all the translation strings will be loaded before you initialize your app.
HTML+CSS+Javascript tools offer a great way to create beautiful presentations (e.g. reveal.js + MathJax). However, I usually need to add citations to my presentations, and I would like to do that in a systematic way (so the bibliography is organized and the references are well-formatted). This is something that get's handled quite easily in LaTeX through BibTeX.
The best solution I've found so far comes from a library called bibtex-js. It seems to do a good job on rendering BiBTeX files in HTML as a bibliography listing, which is partially what I want. However, I don't only need to render bibliography listings, but also, I need to refer to entries in that bibliography by some index, and get a uniformly formatted reference marker. Take, for example, how LaTeX usually handles this problem:
%In thebibliography.bib
#article{darwin1859origins,
title={On the origins of species by means of natural selection},
author={Darwin, Charles},
journal={London: Murray},
year={1859}
}
%In mydocument.tex
As \cite{darwin1859origins} sustains in his ground-breaking book...
The previous code would be rendered as something like "As Darwin(1859) sustains in his ground-breaking book". Moreover, the formatting in which the citation is rendered could also be customizable (e.g. "Darwin,1859", "(Darwing,1859)", "[DWN59]", "[1]", etc.).
So the question is, how do you handle a similar task on a HTML document?
Thank you all in advance!
Yes, there is an emacs extension called org-mode, which is text processing with a markdown like syntax.
This can export to reveal-js trough this: https://github.com/yjwen/org-reveal
Or in my case I use the spacemacs extension: https://github.com/syl20bnr/spacemacs/tree/master/layers/%2Bemacs/org#revealjs-support
So org mode is an intermediate format that compiles to whatever you want, ie reveal-js, html, or even latex.
This includes a reference management system: https://github.com/jkitchin/org-ref
I'm unhappy with this for reveal.js, if we use this with reveal.js we end up having all the citation being presented as the link (whatever we type after cite:) and the full format citations are grouped on whatever slide you place them (so if you have more than 3 you can't read it correctly, although I guess its in the HTML). What I want is either the numbers I get in latex or footnote based citations, because in case of slides footnotes work kind off good.
This will of course work for just HTML pages, however you probably want to have presentations like me. I was searching for a solution for this when I stumbled upon this unanswered question so I guess here is your answer.
I made a project, incidentally also called bibtex-js. Available on npm.
I made it because most BibTeX parsers out there take considerable shortcuts in parsing. This one aligns closely with the authoritative document on BibTeX, Tame the BeaST and so works pretty well in terms of references and parsing author names, which seems what you are after.
I would say, based on some bibliographic standard, roll your own inline citation function:
import {parseBibFile, normalizeFieldValue} from "bibtex";
// Parse bib file
const bibFile = parseBibFile(bibtexString); // insert the darwin1859origins example as a string
// Sanity check: print all ids of entries in the bibfile
console.log(Object.keys(bibFile.entries$));
// Get the entry we are after
const entry = bibFile.getEntry("darwin1859origins");
// Get the relevant fields
// normalizeFieldValue turns a BibTeX string into a Javascript string
const year = normalizeFieldValue(entry.getField("year"));
// get first author
// "author" is a special kind of BibTeX field
const author = entry.getField("author").authors$[0];
function inlineCite(author){
return "("
+ (author.firstNames
.concat(author.vons)
.concat(author.lastNames)
.concat(author.jrs)).join(" ")
+ "," + year
+ ")";
}
console.log(inlineCite(author)); // (Charles Darwin, 1859)
You can do something complicated with et al. if you have multiple authors.
I'm writing a Dashboard widget in Dashcode, and on the back side, I've got a string for credits. I want to include the widget's version number in that string, but if possible, I want to programmatically grab it from the CFBundleVersion or CFBundleShortVersionString key in Info.plist to avoid having to change the number in multiple places if and when I update the widget.
Searches on Apple's developer documentation, Google and various forums have proven fruitless so far. What I'd like to know is whether there's a built-in way to do this that Apple included but forgot to mention (like var version = widget.version(); or something), or whether my script will have to pull in and parse the entire plist before plucking out the one value I actually want.
Thanks for any help you can provide!
I seem to have found the answer: use Dashcode's "data source" facility to read in Info.plist as an XML data source. From there, this blog post showed me how to traverse the plist's structure and get the correct string (in this case, the fifth <string> element in the file, corresponding to CFBundleShortVersionString.
The function I ended up with:
function getWidgetVersion() {
var dataSource = dashcode.getDataSource("infoPlist");
var version = dataSource.selection().valueForKey("dict").valueForKey("string")[4]; // This line and the previous could probably be combined for the sake of brevity
if (typeof(version) == 'string') {
document.getElementById("creditsLabel").innerHTML += version; //I'll change this to just pass the number on
}
}
Since the text of the creditsLabel div has already been started off with a localized string, I get a nice little label saying "Version 1.0".