Currently, I am working with Angular 5.x and utilizing the 'i18n' directive for translation purposes. While I have had success with translating in the .html file and template, I am struggling to find a solution for doing so in the typescript file. Is there a way to include the translation string in the typescript file?
As a side note, it appears that the built-in i18n functionality in Angular does not natively support translating strings in typescript, only in the template.
Unfortunately, achieving this is currently not possible. However, there is hope for the future with Ivy. You can refer to this Github issue for more information.
To address this issue, I was able to find a workaround by creating a translations-component.
Here is the HTML code:
<div style="display:none">
<div id="translation_1" i18n>Text to be translated</div>
</div>
And here is the TypeScript code (which can be an injectable service):
constructor(@Inject(DOCUMENT) private document)) {}
public getTranslation(id: string) {
return this.document.getElementById(id);
}
For example, in your presentation component, you can use: translationService.getTranslation("translation_1");
While not perfect, this solution does the job effectively.
Currently facing an issue with my Angular assignment where changing an element's value doesn't reflect in the browser, even though the change is logged in the console. The task involves toggling the status of a member from active to inactive and ...
I am currently learning how to develop with Vue.js. I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the consol ...
As I work with gojs and utilize an organizational chart, I have encountered a problem with one of the context menus. Specifically, when selecting "Remove Role", I receive an error message stating Property 'setParentKeyForNodeData' does not exist ...
I need to pass a variable into [ngModel] but I'm unsure of the correct syntax. Can someone help me determine if this code is accurate? <select [ngModel]=this.audutModel (ngModelChange)="AddAdults($event)"> ...
Attempting to load .env environment variables using Typescript. Here are my .env and app.ts files: //.env DB_URL=mongodb://127.0.0.1:27017/test // app.ts import * as dotenv from 'dotenv'; import express from 'express'; import mongoo ...
my unique test import VueI18n from 'vue-i18n' import Vuex from "vuex" import iView from 'view-design' import {mount,createLocalVue} from '@vue/test-utils' // @ts-ignore import FormAccountName from '@/views/forms/FormAcco ...
Has anyone experienced difficulties logging into a Google account using Cypress.io and the Google authentication pop-up window? Although I am able to open the window, Cypress is unable to locate the ID for the email input field. The specific error messag ...
I am facing an issue with JSON data as I have 3 tables in my database named "dictionary" with the same structure but different column names: {"id":1,"test_1":"test"},{"id":2,"test_1":"lalala"} - first JSON {"id":1,"test_2":"****"},{"id":2,"test_2":"afe ...
In the process of developing my web portfolio, I am utilizing NextJS, TypeScript, and TailwindCSS. A key feature on my site involves displaying a list of books I have read along with my ratings using a NextUI table. To visualize this functionality, you can ...
I came across this helpful gist with date extensions: https://gist.github.com/weslleih/b6e7628416a052963349494747aed659 However, when attempting to use the functions, I encountered a runtime error stating: TypeError: x.isToday is not a function I foun ...
I am dealing with 3 files: model.ts, modal.html, and modal.ts. I want the auto refresh feature to only happen when the modal is open and stop when it is closed. The modal displays continuous information. modal.htlm : <button class="btn btn-success ...
Using the async pipe in HTML involves utilizing the syntax "Products$ | async as products". But can we also access these same products in the TypeScript file? Is this possible? ...
I am currently experimenting with using TensorFlow JS to develop a real-time object detection application in Angular 13. My goal is to utilize a video element that captures footage from the webcam, and I am attempting to invoke the model.detect(video) meth ...
After successfully creating an Angular project using angular-cli, I attempted to start the project with npm start. However, I encountered an error message indicating that a font was refused to load. Refused to load the font 'data:font/woff;base64,d0 ...
Currently, I am in the process of implementing an API for Q&A on my portal and I am faced with two options: To hard code the categories into the HTML, and only load the questions from the API when the category component is opened (which will be displayed ...
Feeling a bit perplexed, but here I go: I am dealing with information on two characters obtained from various endpoints. The data is not neatly organized from the backend, so instead of receiving structured data like this: character{ character1{ ...
I am facing an issue with a foreach loop in my code. I have a new temp array created within the loop, followed by a nested foreach loop. However, when trying to access the temp array inside the nested loop, I encounter a "variable not available" error. le ...
Is there a way to add different click events for specific columns of an Angular Material Table? Specifically, I would like the left column (Blue/LP) to trigger a click event that passes the LP value, while the right column triggers an expand action. Curren ...
Imagine having the following function: let getData = () => { return { name: 'John', age: 2, isAsian: true } } Is there a way to specify a variable's type as the return type of getData, without assigning i ...
I am facing a situation where I have a form with required fields and 2 buttons: one button is for submitting the form, and the other button is for downloading a file. When the form is not valid, the submit button is disabled until the form becomes valid: ...