Angular 2 i18n: Localization of <option> values

I am in the process of transitioning my application from ng2-translate to native i18n support. I have encountered an issue when trying to translate a <md-select> element with multiple options:

<md-select placeholder="Salutation" i18n-placeholder>
        <md-option *ngFor="let s of salutations" [value]="s.value">{{s.name}}</md-option>
</md-select>

The documentation does not provide guidance on how to include the option values in my XLF file when they are delivered through TS. Any assistance would be greatly appreciated.

angulartypescriptinternationalization

Answer №1

Response: It seems there was an error in the configuration. Everything is functioning correctly now with 

<target>{testRandom, plural,  =0 {none} =1 {single} other {several}}</target>

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

How can I showcase a different component within another *ngFor loop?

I am currently working on a table in HTML that displays product information. Here is the code snippet for it: <form [formGroup]="myform" (ngSubmit)="submit()" > <tbody> <tr class="group" *ngFor="let item of products;"&g ...

htmlangulartypescriptngfor

Exploring the concept of class type definition in Typescript can lead to an

To achieve overloading of a class definition in TypeScript, you can set up the constructor to accept either a value for a certain property or no value at all. When instantiated with a value passed to the constructor, the property is typed based on the prov ...

typescripttypescript-typings

The 'id' property is not found within the 'Order[]' type

Encountering a perplexing issue in my HTML where it keeps showing an error claiming that the 'id' property does not exist on type Order[] despite its clear existence The error message displayed: Property 'id' does not exist on type &ap ...

angularrxjs

The attribute 'attribs' is not found on the 'Element' type in cheerio

When I run my code, I encounter an error that says Property 'attribs' does not exist on type 'Element'. It's puzzling to me why this error is being thrown. After examining the type definitions of cheerio, I discovered that attribs ...

typescriptcheerio

Encountering the error message "Unable to access properties of null (specifically 'useState')" while trying to utilize a component from my custom library

After developing a personalized UI library and style guide to standardize components in my application, all was running smoothly until I incorporated a component utilizing the useState hook. An error consistently surfaces whenever I attempt to use a compo ...

reactjstypescriptnext.jsrollupjs

Enhancing the default functionality of React.FC within Next.js

Currently, I am working on a tutorial in Nextjs that employs the code snippet below in JavaScript. However, I am planning to transition it to TypeScript. Since I am relatively new to TypeScript, I have attempted various solutions from different sources but ...

javascriptreactjstypescriptnext.js

Guide on stubbing Google gapi global variable in component tests with Karma

I am currently facing a challenge in setting up tests for a service in my Angular 4 project that utilizes Google gapi. The issue arises from the fact that the variable is globally declared but not mocked, leading to an error when running the tests: Refe ...

angularunit-testingkarma-jasminegoogle-api-js-client

IntelliSense in VSCode is unable to recognize the `exports` property within the package.json file

Currently, I am utilizing a library named sinuous, which contains a submodule known as "sinuous/map". Interestingly, VSCode seems to lack knowledge about the type of 'map' when using import { map } from "sinuous/map", but it recognizes the type ...

javascripttypescriptvisual-studio-codevite

Utilize Angular 2 interceptor to incorporate HTTP requests

Dealing with the 401 response from an interceptor using the HttpClientModule in Angular and JWT authentication can be a bit tricky. When the accessToken expires, it's necessary to use the refreshToken to obtain a new one before making the actual API r ...

javascriptangularhttptypescript

What could be causing the Angular 5 error: "Cannot find exported module 'OpaqueToken'."?

I am currently in the process of upgrading my Angular 4 application to Angular 5. During this upgrade, I encountered the following error message: ERROR in src/app/application/services/generated/variables.ts(1,10): error TS2305: Module '"..../no ...

angularangular5swagger-2.0swagger-codegen

Issue with Datatables not loading on page reload within an Angular 7 application

Incorporating jQuery.dataTables into my Angular 7 project was a success. I installed all the necessary node modules, configured them accordingly, and added the required files to the angular.json file. Everything functioned perfectly after the initial launc ...

node.jsangulartypescriptdatatables

Hosting asynchronous bindings in Angular 2

I'm currently working on a component with the following code: @Component({ selector: 'my-selector', template: `<div>html code goes here</div> `, host: { '[style.background]': "'url(' ...

angularrxjs

Looking for a regular expression to require either a dollar sign ($) or a percentage symbol (%) but not

At the moment, I currently have this input field set up on an HTML page within my Angular 9 application: <input type="text" formControlName="amountToWithholdInput" onkeyup="this.value = this.value.replace(/[^0-9.%$]/, &ap ...

htmlregexangularcurrencypercentage

"Exploring Angular 2: Understanding the Distinction Between Modules and

I'm struggling to understand why Angular2 has two separate concepts. Module Component What exactly sets them apart and what purpose does each serve? Under what circumstances should I create a SubModule? When is it necessary to create a SubCo ...

angular

A guide to utilizing ngFor in Angular 7 to loop through nested JSON and display it in a ul li

Looking to insert a nested JSON into an unordered list using ngFor loop in Angular. Here's the expected output format in HTML: home.component.html <div class="col-md-3" id="leftNavBar"> <ul *ngFor="let item of nestedjson"> <li c ...

angulartypescript

Uh-oh! Angular 6 has encountered an unexpected error with template parsing

I am currently working on an Angular application where I have integrated the FormsModule from '@angular/forms' in my app.module.ts. However, despite this, I keep encountering the error message No provider for ControlContainer. Error log: Uncaug ...

javascriptangulartypescript

Issue encountered with executing `ng build` in Angular Bitbucket Pipeline

I have set up a pipeline in Bitbucket to deploy my Angular app to an FTP server. The pipeline.yml file for this setup looks like this: image: node:6.9.4 # we need node image to run our angular application in clone: # help to clone our source here de ...

angularbitbucket-pipelines

Using the Command Line Interface (CLI) to set up Angular 2 alongside

Hello everyone, I'm excited to share my first post! If you think I need to include any screenshots or code snippets, please let me know. I recently built a new application using the Angular 2 CLI. While I can successfully load data through mocks, I&a ...

angularexpress

Issue with Progressive Web App functionality when using Angular Pre Rendering

Currently, I am working on an Angular 10 Universal project. Whenever I execute the following command: "build:ssr": "ng build --prod && ng run PROJECT:server:production && node dist/PROJECT/server/main.js", I can see th ...

angularangular-universal

Deactivate dates in angular material date range picker after a certain number of days

Utilizing the latest version 16 of Angular material date range picker with active action buttons as shown in this image https://i.stack.imgur.com/srZGn.png My current goal is to disable a specific number of days following the selected start date. For inst ...

angularangular-materialangular16angular-daterangepicker