Tips on dynamically translating resources using ngx-translate

Can anyone help me with ngx-translate? I'm struggling to figure out how to dynamically translate resources in HTML.

Here's an example:

    "agreement.status.0": "New",
    "agreement.status.1": "Rejected",

And here is the corresponding HTML code:

   <span>
        <mat-form-field appearance="outline">
            <mat-label>{{'choiceType' | translate}}</mat-label>
            <mat-select [(ngModel)]="selectedAgreementType">
                <mat-option *ngFor="let state of agreementStates" [value]="state.id">
                    {{ 'agreement.status.' + state.id | translate}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </span>

I'm struggling to understand how to link a fixed string constant with a variable. Please guide me on this!

angulartypescript

Answer №1

If you need assistance from the backend, there is a function you can use to translate IDs within your code:

translate(id){
return this.translate.instant('agreement.status.' + id);
}

You can then implement it in your code like this:

<mat-option *ngFor="let state of agreementStates" [value]="state.id">
{{translate(state.id) }}
<mat-option>

Answer №2

To make an 'agreement.status' | translate into an alias and utilize it within the options.

 <span *ngIf="('agreement.status' | translate) as status">
    <mat-form-field appearance="outline">
        <mat-label>{{'choiceType' | translate}}</mat-label>
        <mat-select [(ngModel)]="selectedAgreementType">
            <mat-option *ngFor="let state of agreementStates" [value]="state.id">
                {{ status[state.id] }}
            </mat-option>
        </mat-select>
    </mat-form-field>
 </span>

Check out this Sample Stackblitz!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

employing ts as a reference for the pathway

Every time I reference path using "ts" I include the following code snippet: import * as fs from 'fs'; import * as path from 'path'; However, when I try to run node index.ts, an error occurs: import * as path from 'path'; ...

node.jstypescript

What is the method for adjusting the time format?

Using the TIME data type, my data is currently displayed in the format hh:mm:ss (03:14:00). How can I change it to display in the format hh:mm (03:14)? The usual DATE type method does not seem to work: {{test.time | date: 'HH:mm'}} However, thi ...

javascriptangulartypescript

Searching for a foolproof oauth framework that includes efficient refresh tokens

Currently, I am implementing oauth with refresh tokens for my Angular application and have a specific set of requirements: Automatically refresh the token when 5% of its time is remaining Handle situations where there is a loss of internet connection (re ...

angularauthenticationoauthjwt

Code coverage analysis in a node.js TypeScript project consistently shows no coverage metrics

I'm currently working on a backend TypeScript project where I'm aiming to obtain coverage reports for unit test cases. However, Jest is returning empty coverage reports both in the terminal and in the HTML report, with no information provided. Ev ...

javascriptnode.jstypescriptjestjscode-coverage

When viewing an array, the objects' values are displayed clearly; however, when attempting to access a specific value, it

I am attempting to retrieve the board_id of my objects in the columnsServer array... columnsServer: Column[]; this.service.getColumns() .subscribe(data => { this.columnsServer = data; console.log(this.columnsServer); for (this.i = 0; this.i ...

javascriptangulartypescript

``Why Ionic 3 Popover Sizes Should Adapt to Different Screen

Currently in my Ionic 3 project, I am utilizing a popover with a set height using the following code snippet: editOpty(rw){ let popover = this.editOptyPopup.create(EditOptyPopoverComponent, rw, { cssClass: 'edit-opty-popover'}); popover ...

cssangulartypescriptsassionic3

Utilizing Angular to Build a Single Router with Numerous Components

Within my Angular application, I am facing a challenge with two components: DashboardComponent and LoginComponent. When a user accesses the URL http://localhost:4200, I need to display the LoginComponent if the user is not logged in. However, if the user i ...

angular

Issues with routing device

I'm experiencing an issue with the navigation on my app. When I click on the button, nothing happens except for some weird behavior. However, when I use <router-outlet></router-outlet>, it works perfectly. Here is my app.module.ts file: ...

angularangular2-routing

Arrow functions do not function properly with Typescript decorators

I've created a typescript decorator factory that logs the total time taken to execute a function, along with the actual function execution results and parameters passed to the decorator. For example: export function performanceLog(...args: any[]) { ...

javascripttypescriptecmascript-6decoratortypescript-decorator

Manipulating strings in Angular using property binding

Is there a way to concatenate the following two statements that work individually? <app-output [warnMessage]="myvalue | number:'1.0-1'"></app-output> <app-output [warnMessage]="'TEXT01' | translate"></app-output&g ...

angularangular2-template

Creating an Angular form from scratch using HTML

I've developed a component named login. Initially, I created an HTML form called login.component.html and then decided to convert it into an Angular form. To achieve this, I inserted <form #loginform="ngForm"> in the login.component.ht ...

htmlangulartypescript

Navigating in express

Here is the structure I am working with: server.ts routes/ index.ts homeRoute.ts In server.ts: let app = Express(); app.use(router); In routes/index.ts: const routes = Router(); export default function router() { routes.use('/home' ...

node.jstypescriptexpress

Navigating through multiple checkbox values in Angular 4/5

Is there a way to retrieve values from checkboxes other than just true or false? Take a look at my template below: <h4>Categories</h4> <div class="form-check" *ngFor="let cat of categories$|async"> <input class="form-check-input" ...

angularcheckboxangular-forms

What is the reason behind TypeScript failing to provide type safety in a generic higher order component which introduces extra properties into React components?

I'm currently working on developing a versatile higher order component, but have encountered an issue with type safety not being enforced. Interestingly, when attempting the same implementation without using generics, the type safety is verified as ex ...

reactjstypescriptgenericshigher-order-components

PrimeNG Template not showing the form

I have integrated a form into PrimeNG's turbotable to allow users to create a new entry (group) in the table located within the footer. However, the form is not being displayed as expected. Can you help me troubleshoot this issue? <ng-template pTe ...

angulartypescriptprimengangular-reactive-forms

Typescript causing undefined React Router match issue

Currently, I am working on a basic eCommerce Proof of Concept using react and TypeScript. Unfortunately, I am facing an issue where I am unable to pass props to a product detail page or access the match containing the params. This is how my Routes pages a ...

reactjstypescriptreact-router

Tips for refining TypeScript discriminated unions by using discriminators that are only partially known?

Currently in the process of developing a React hook to abstract state for different features sharing common function arguments, while also having specific feature-related arguments that should be required or disallowed based on the enabled features. The ho ...

typescripttype-inferencediscriminated-unionnarrowing

What is the workaround for using DomSanitizer in a unit test when the component does not automatically inject it?

I have a basic component that does not utilize the DomSanitizer. Let's call it export class ExampleComponent { @Input() public safeHtml: SafeHtml | undefined; } How can I incorporate the DomSanitizer in a unit test? I have attempted to prov ...

angulartestbedangular-dom-sanitizer

I'm currently utilizing lint in my Angular 2+ project. Is there a way to arrange the constructor parameters in alphabetical order

I am struggling to organize the constructor parameters in TypeScript while using TSLINT with Angular9. I am looking for a rule similar to member-ordering that can help me sort them effectively. constructor( // Sort these private readonly router: R ...

javascriptangularlinttslint

What is the best way to access an object's key within an array using TypeScript?

How can I access the key values of the objects stored in a predefined array? const temp = [ { key: "name", value: "mike" }, { key: "gender", value: "male" }, ]; I am interested in retrieving the key values, such as name and gender, from the objects wi ...

typescripttypescript-genericstypescript2.0