I am seeking to incorporate dynamic elements into multiple translations using ngx-translate. This involves combining this solution for handling multiple translations:
this.translate.get(['HOME', 'MY_ACCOUNT', 'CHANGE_PASSWORD']).subscribe(res => {
showToast(res.HOME,res.MY_ACCOUNT,res.CHANGE_PASSWORD);
});
and this one for dealing with dynamic text:
this.translate.get('HOME', {value: 'test_HOME'}).subscribe(res => {
showToast(res);
});
If you haven't already found a solution, here is an approach I took:
public translateTableHeadings(stringArr: string[] = []): Observable<string[]> {
const sub = new Subject<string[]>();
const obs$ = Observable.from(stringArr);
obs$
.map(aString=>
this.translate.get(aString)
)
.toArray()
.takeUntil(sub)
.subscribe(translatedStrings=> {
sub.next(translatedStrings);
sub.complete();
});
return sub.asObservable();
}
Although I'm familiar with the modifications made to the get function in the TranslationService to handle multiple translation strings as input, my specific scenario required executing code for each one after it was translated (hence the use of .map on this.translate.get(...).
I hope this proves useful.
as per the type annotation provided in the TranslateService for the get method, you have the option to include interpolateParams as the second parameter.
TranslateService.get(key: string | string[], interpolateParams?: Object): Observable<any>
Currently, I am facing an issue in my project where I am utilizing lazy loading. Specifically, within my registration module, I am attempting to utilize the [ngClass] directive to append an 'invalid' class when there are validation errors present ...
custom/reducer/shoppingReducer.ts import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { ShoppingReducerInitialState } from "../../types/reducer-types"; import { ProductItem, ShippingDetails } from "../../types/typ ...
I've recently dived into Angular and successfully created my first dropdown using it, which is working great. However, I'm a bit concerned about the number of comparisons being made and wondering if this approach is considered bad practice. The ...
I'm currently developing a component that necessitates the use of two specific child components. These two components are exported using dot notations from the main component and have defaultProps for identification within the main component: export ...
I'm struggling to grasp the concept of encapsulation: ViewEncapsulation.None within the @Component. @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], encapsulation: ...
Is there a way to sort the data object based on the order numbers inside the array objects? data =[ { name:'' list:{ order :2 }, { name:'' list:{ order :1 } ] ...
When using Angular Material UI in the Registermenu, I am facing an issue where clicking on the reset button deletes the content but leaves the red frames unchanged. Can anyone provide assistance with this problem? Thank you. Screenshot Here is the code f ...
I'm struggling to understand why my tslint insists on having a trailing comma at the end of the last line in the objects. Is there a way to configure the ignore rule for the last line of objects? Appreciate any help! For example: settings = { ...
Currently, I am facing a situation where I need to include an input box within my dropdown option menu. The challenge is that I cannot utilize the custom tag creator feature of react select to create a new option with the dropdown. Upon going through the ...
I am encountering an issue with the code below that is producing this error message: Type '() => void' is not assignable to type 'FC<{}>'. Type 'void' is not assignable to type 'ReactElement<any, any> | nul ...
If we have three variables, such as firstName, lastName, and email, how can we check if they are empty or not without using multiple if else blocks? let firstName = "John"; let lastName = "Doe"; let email = "john.doe@example.com"; if (firstName.trim() == ...
Currently, I am utilizing the optional addition feature in this way: ...(!!providerId && { providerId }), ...(!!practiceId && { practiceId }), Is there a more elegant shorthand method to replace this logic, such as: yield createRemark ...
My goal is to achieve a task that would typically be done with a Global variable in a database management system. I am attempting to transfer data from one component to another using a service. These components are like siblings, located in the components ...
Here's the current implementation that is functioning as expected: let newList: any[] = []; for (let stuff of this.Stuff) { newList = newList.concat(stuff.food); } The "Stuff" array consists of objects where each ...
Seeking assistance with Angular routing issues. I have retrieved data from JSON placeholder and am attempting to display user details. Although everything functions correctly, I encounter an error in the console stating: Cannot read properties of undefine ...
I am looking to test the get and set methods of my user.store.ts file. The get() method is used to retrieve users, while addUsers() is utilized to add new Users to the BehaviorSubject. How can I accomplish this? import { Injectable } from '@angular/c ...
When generating the swagger.json using tsoa for TypeScript, I encountered an issue. Even after adding an access token to the authorize menu in Swagger and making a request to one of my endpoints, the x-access-token header is missing from the request. What ...
My goal is to send the selected data in a table row, which I select through a checkbox, to the server. However, I'm unsure about how to handle this via a service call. While I have the basic structure in place, I need assistance with sending the items ...
In my MEAN stack app, I have Angular built in the public folder of Express to run the server on the same port. I also have a certificate from Cloudflare added to Node.js for HTTPS server, and my server is running on Nginx. I have opened port 443 on EC2, an ...
Reviewing the source code: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { IonicModule } from '@ionic/angular'; import { HomePage } from './home.page'; import { LevelGridComponent } from &a ...