How can I update a value using a specific key in Angular?

Question

How can I update a value using a specific key in Angular?

So, I have a string value that I need to pass to another function. For instance, if the string is 'eng', I want it to be converted to 'en'. I'm looking for a solution that does not involve using slice or if statements. I attempted to create an enum, but unfortunately, that did not work as expected.

ngOnInit(): void {    
this.setLocaleDateFormat(this.translateService.currentLang);
    }

 setLocaleDateFormat(language: Languages): void {
    this.dateAdapter.setLocale(language);   } 

export enum Languages {   
'eng' = 'en',   
'slk' = 'sk',   
'cze' = 'cz',
 }

Essentially, I need to pass a value and based on some criteria, change it to something else. For example, I receive 'eng' but I want to set the locale to 'en'.

angular typescript

Answer 1

Answer №1

It appears that when calling

this.translateService.currentLang

, the result will likely be 'eng'. However, there is some uncertainty around this assumption, so it's best to revisit your initial question. Instead of defining languages as an enum, consider using a constant object.

export const Languages = {
  eng: 'en',
  slk: 'sk',
  cze:  'cz',
};

setLocaleDateFormat(): void {
    this.dateAdapter.setLocale(Languages[this.translateService.currentLang]);
}

Answer 2

It appears that when calling

this.translateService.currentLang

, the result will likely be 'eng'. However, there is some uncertainty around this assumption, so it's best to revisit your initial question. Instead of defining languages as an enum, consider using a constant object.

export const Languages = {
  eng: 'en',
  slk: 'sk',
  cze:  'cz',
};

setLocaleDateFormat(): void {
    this.dateAdapter.setLocale(Languages[this.translateService.currentLang]);
}

Answer 3

Answer №2

The kind of lingo isn't Lingo which stands for

"en" | "sk" | "cz"

, but rather keyof typeof Lingoes.

Playground

function setLanguage(locale: Lingoes) {
  console.log('setLanguage to', locale);
}

enum Lingoes {   
 'eng' = 'en',   
 'slk' = 'sk',   
 'cze' = 'cz',
}

function setLanguageDialect(lingo: keyof typeof Lingoes): void {
  setLanguage(Lingoes[lingo]);
} 

setLanguageDialect('eng');

Answer 4

The kind of lingo isn't Lingo which stands for

"en" | "sk" | "cz"

, but rather keyof typeof Lingoes.

Playground

function setLanguage(locale: Lingoes) {
  console.log('setLanguage to', locale);
}

enum Lingoes {   
 'eng' = 'en',   
 'slk' = 'sk',   
 'cze' = 'cz',
}

function setLanguageDialect(lingo: keyof typeof Lingoes): void {
  setLanguage(Lingoes[lingo]);
} 

setLanguageDialect('eng');

Answer 5

Answer №3

Start by defining a reference object:

const languageMap = {eng: 'en', slk: 'sk', cze: 'cz'};

Next, you can implement it in your code like so:

ngOnInit(): void {    
    this.setLocaleDateFormat(languageMap[this.translateService.currentLang] || 'defaultLocale');
}

setLocaleDateFormat(lang: string): void {
    this.dateAdapter.setLocale(lang);   
}

Answer 6

Start by defining a reference object:

const languageMap = {eng: 'en', slk: 'sk', cze: 'cz'};

Next, you can implement it in your code like so:

ngOnInit(): void {    
    this.setLocaleDateFormat(languageMap[this.translateService.currentLang] || 'defaultLocale');
}

setLocaleDateFormat(lang: string): void {
    this.dateAdapter.setLocale(lang);   
}

How can I update a value using a specific key in Angular?

Answer №1

Answer №2

Answer №3

Similar questions

Typescript compiler: Unable to locate the definition for 'Map' data type

What could be the reason for my npm package installed globally to not be able to utilize ts-node?

What prevents us from returning Observable.of(false) in the catch block within the canActivate function?

Why is an additional return statement necessary in Angular when attempting to retrieve data from a custom service?

Best Practices for Utilizing NPM Modules with TypeScript

Issues with navigation in React Native Typescript

"Exploring the Power of TypeScript Types with the .bind Method

tsc and ts-node are disregarding the noImplicitAny setting

Using TypeScript to define a static enum within a React functional component

Too many open files error encountered in Watchpack (watcher) - NextJS

Encountering a tslint issue: "Parsing error: Expression expected"

Is it possible to register multiple mini router apps using app.use() in MEAN?

Utilizing AWS Amplify with TypeScript and TypeScript Lambdas for powerful web development

What is the best way to prevent or highlight a particular row in a table depending on the line number values using Angular 2 and NgFor?

Error thrown by webpack: Module 'pug' not found when attempting to access get-api

Is there a technique to block small increments in a Time Input field?

Retrieving radio button value in Angular 2

Leverage the event handler within a React Component when working with TSX tags

Unable to serve static files when using NextJs in conjunction with Storybook

Encountered a snag during the construction of an Angular 8 SSR application