Exporting a value from a class in Angular 2 using TypeScript

import {TranslateService, LangChangeEvent} from "@ngx-translate/core";
class CustomLanguageExporter {
    public currentLang : string;
    constructor(private translate : TranslateService) {  
    }
    public static setLanguage(): string {
        this.translate
        .onLangChange
    .subscribe(lang => {
     this.currentLang = lang;
    })
    return this.currentLang;
        }
    }

export let languageExport = CustomLanguageExporter.setLanguage(); //Error: Property 'setLanguage' does not exist on type 'typeof CustomLanguageExporter'.

Desired output console.log(let+"someValue");

Answer №1

Your current structure may need some adjustments. It appears that you are looking to retrieve the lang value from the observable. Consider restructuring your approach for better results.

public static updateValue(): string {
    return this.translate.onLangChange
}

Next, when invoking this function, ensure to subscribe to it and handle the retrieved value accordingly.

this.updateValue().subscribe(lang => {
  this.selectedLanguage = lang;
  // perform additional actions as needed
})

By utilizing a subscription, the function will be triggered whenever a new value is available. Focus on reacting to these changes rather than simply returning the value.

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

Is it possible to encounter an unusual token export while trying to deactivate Vue with veevalidate

Utilizing Nuxt with server side rendering. Incorporating Typescript along with vee-validate version 3.4.9. The following code has been validated successfully extend('positive', value => { return value >= 0; }); Upon adding the default, ...

How can I bind Angular to the selection of a file input field?

I am facing an issue with my upload form where the displayed filename is showing a virtual filepath instead of just the filename itself. How can I improve the binding to only display the filename (like selected.files[0].name) without any virtual path? My ...

What is the best way to add a hyperlink to a cell in an Angular Grid column

I need help creating a link for a column cell in my angular grid with a dynamic job id, like /jobs/3/job-maintenance/general. In this case, 3 is the job id. I have element.jobId available. How can I achieve this? Here is the code for the existing column: ...

Are you interested in verifying the user's login status on the website using a Chrome extension?

My latest project involves creating a chrome extension using angular for a PHP website. Currently, the extension is working smoothly. It features a button that I would like to have the ability to enable or disable based on whether the user is logged in o ...

Creating a typescript object shape without an index signature involves specifying the exact properties

I have a query regarding a potential design gap in TypeScript. Consider a function that accepts objects meeting a specific interface: interface Params { [key: string]: string | number | boolean | undefined | null; } This interface specifies that the k ...

Is it possible to create a single directive that can handle both Structural and Attribute behaviors?

Trying to develop an Angular Directive that will handle various functionalities based on config input values Dynamically add elements to the DOM based on input values (similar to ngIf) Apply styling to rendered elements Add attribute properties such as d ...

extract objects from an array of objects based on a specified array

Within my JSON array, I have data structured like this: const data = [ { "uniqueId": 1233, "serviceTags": [ { "Id": 11602, "tagId": "FRRRR", "missingRequired&quo ...

component is receiving an incompatible argument in its props

I am facing a situation where I have a component that works with a list of items, each with an ID, and a filtering function. The generic type for the items includes an ID property that all items share. Specific types of items may have additional properti ...

Launching ngx-modal in Angular2 without the need for a button click

As a newcomer to Angular2, I am seeking guidance on how to trigger an alert Modal in the event of a failed login within my code. While most examples I have come across rely on a button click, I am wondering if it is possible to achieve this based on the st ...

Tips for validating Enum Strings using the newest version of Joi?

Is there a way to validate Enum String? In the past, I followed this advice from: https://github.com/hapijs/joi/issues/1449 enum UserRole { Admin = 'admin', Staff = 'staff' } const validator = { create: Joi.object().keys({ ...

"Dealing with conflicts between RMQ and TypeORM in a NestJS

Every time I try to use TypeOrm, RMQ crashes. I can't figure out why. Utilizing the library golevelup/nestjs-rabbitmq has been a struggle for me. I've spent 7 hours trying to resolve this issue. @Module({ imports: [ ConfigModule.f ...

What is the reason behind Angular Material sort buttons showing arrows, yet failing to actually sort the columns?

Looking to make my table sortable, I've been using the https://material.angular.io/components/sort/overview. The "Sort Header" feature is working on other tables in the web-app, I've gone through the documentation, watched tutorials, but for some ...

Angular4: The dragstart event is being triggered as a result of the mousedown event

My div contains a mousedown event for the parent element and a dragstart event specific to that div. However, I am facing an issue where the dragstart event is not being triggered when I try to drag the div. I attempted to use event.stoppropagation() with ...

Tips for implementing pagination in ag-Grid with Angular 2

Currently, I am working on developing a grid with pagination feature in Angular 2 using ag-grid. I have already attempted the code below in the HTML file: [gridOptions]="gridOptions" [columnDefs]="columnDefs" [showToolPan ...

Testing React Hooks in TypeScript with Jest and @testing-library/react-hooks

I have a unique custom hook designed to manage the toggling of a product id using a boolean value and toggle function as returns. As I attempt to write a unit test for it following a non-typescripted example, I encountered type-mismatch errors that I' ...

Retrieve information from two distinct observables from within the resolver function

I'm facing an issue with my services that work on the observable principle. I am trying to fetch the results of 2 services inside a resolver to display on my page. However, the data being displayed on the page is just an empty data object. I even trie ...

The PWA software encountered an issue where the checkForUpdate function never resolved

Despite my efforts, I have encountered an issue while working with the PWA for our application. The checkForUpdate and versionUpdates methods do not seem to resolve to any values. constructor( appRef: ApplicationRef, updates: SwUpdate, ) { ...

Encountered a syscall spawn git error while running npm install command

I recently attempted to execute npm install and encountered the following problems: Even after attempting to clear cache forcibly, installing git, and updating node, none of these solutions proved effective. Above is the specific error message I received ...

The field 'name' is not recognized on type 'never'

Currently immersing myself in Angular and experimenting with making an API call, but I'm encountering the following error: error TS2339: Property 'name' does not exist on type 'never'. import { Component, OnInit } from '@angu ...

Error message: Typescript and Styled-Component conflict: GlobalStylesProps does not share any properties with type { theme?: DefaultTheme | undefined; }

I've encountered an issue while passing props inside GlobalStyles in the preview.js file of my storybook. The props successfully remove the background from the default theme, but I'm receiving an error from Typescript: The error message states " ...