The 'translate' attribute is not recognized in the 'LogComponent' data type

I'm currently working on implementing a language change feature on my webpage, but I've encountered the following error:

Error: Property 'translate' does not exist on type 'LogComponent'

export class LogComponent {
      langs: any;
      constructor( translate: TranslateService ){    
        this.langs = translate.getLangs();

      }

      langSelect(lang: string): void {
        this.translate.use(lang);
      }

    }

Additionally, here is the relevant HTML code snippet:

<select #langSelected (change)="langSelect(langSelected)">
  <option *ngFor="let l of langs" [value]="l">{{ l }}</option>
</select>

However, despite these efforts, the functionality seems to be malfunctioning. Can you spot what I might have overlooked?

angulartypescript

Answer №1

translate is not recognized as a variable because it has not been defined. To fix this, modify the line to:

constructor( private translate: TranslateService ){

By using private, public, or protected in the constructor parameter list, you are declaring that variable as a class property. This can also be explicitly written out like so:

export class LogComponent {
  private translate: TranslateService;

  constructor( translate: TranslateService ){    
    this.translate = translate;
  }
}

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

Steps to simulate an injected service within a function using Injector

There is an implementation in Angular 7.x where a global error handling injects its services using the Injector. Each function has a reference with the injector, as shown below: import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/co ...

angularunit-testingjasminekarma-runner

Unraveling the Mystery of the Undefined Parameter in Angular Observables

I am facing an issue with the Observable parameter in my code. I have a consultService that contains the functions consult() and response as a parameter. The function sendConsultRequest() is called before using the response parameter. Although the sendCons ...

angulartypescriptobservable

Unable to display the minimum height for a bar in Highcharts

Is there a way to set a minimum height for the bar/column/stacked-column chart in Highcharts when there is a significant difference in values? I am having trouble seeing any plot for the minimum value. My series could look like this: [10000012123, 78, 578 ...

angulard3.jschartshighchartsangular2-highcharts

Angular 4 Bootstrap dropdown issue - not functioning as expected

I am currently trying to use a Bootstrap dropdown list in conjunction with Angular 4, but I am encountering some issues. Despite having three items inside the "Varukorg", they are not displaying in line as expected. https://i.sstatic.net/zvgor.png <li ...

angularbootstrap-4

The Ag-grid-enterprise error message indicated: "An error occurred as details.rootNode.updateHasChildren is not a

https://i.sstatic.net/sMiDi.jpg Currently utilizing Angular 9 with all required ag-grid packages successfully installed. The package.json file includes: "ag-grid-angular": "^23.1.1", "ag-grid-community": "^23.1.1", ...

angularag-gridag-grid-angular

How can data be typically encapsulated within Pinia stores when leveraging the composition API?

Currently, in my Vue 3 application with Pinia, I am interested in leveraging the composition API within my Pinia stores. Take a look at this example store: export const useMyStore = defineStore("my", () => { const currentState = ref(0); return ...

javascripttypescriptvue.jspinia

Adding ngrx action class to reducer registration

Looking to transition my ngrx actions from createAction to a class-based approach, but encountering an error in the declaration of the action within the associated reducer: export enum ActionTypes { LOAD_PRODUCTS_FROM_API = '[Products] Load Products ...

javascriptangulartypescriptngrxngrx-store

Jest encounters issues while attempting to execute TypeScript test cases

Encountering an error while trying to execute tests in a repository that has a dual client / server setup. The error seems persistent and I'm unable to move past it. > jest --debug { "configs": [ { "automock": false, ...

typescriptjestjs

Expanding a container component with React TypeScript

I'm in the process of developing a foundational class, encapsulating it within a container, and extending it in my various components. Here's a basic example: let state = new State(); class Base extends React.Component<{}, {}> { } const ...

javascriptreactjstypescript

Is there a more efficient method to optimize this code and eliminate the need for multiple if statements?

Looking for advice on refactoring this code to reduce the number of if statements. The challenge is handling 4 different inputs to generate a single answer. const alert= markers.some((marker) => marker['hasAlerts'] > 0); const warning= m ...

typescriptif-statementswitch-statementrefactoring

How to manage multiple sockets within a single thread using ZeroMQ.js

Currently, I am in the process of setting up a service using ZeroMQ in conjunction with Node.js. Utilizing the ZeroMQ.js package for this purpose. Reference can be found in The ZeroMQ Guide, which outlines how to manage multiple sockets within a single ...

node.jstypescriptzeromq

Guide to including spinner in React JS with TypeScript

I need help with adding a spinner to a React component. The issue I'm facing is that the spinner does not disappear after fetching data from an API. Can someone please point out what I am doing wrong? Here is the code snippet: import React, { useSta ...

javascriptreactjstypescript

Experiencing a snag with Angular2 and angular2-jwt: encountering an issue with AuthHttp where the JWT must consist

Encountering an issue with AuthHttp despite receiving a valid token from the authentication. The token has been confirmed as valid on . Currently working with Angular 4. Here is my code: Sign-In Code signIn(login: string, password: string) { this.U ...

angularjwtangular2-jwt

Exporting a module from a TypeScript definition file allows for seamless sharing

I am in the process of developing a definition file for the Vogels library, which serves as a wrapper for the AWS SDK and includes a property that exports the entire AWS SDK. declare module "vogels" { import AWS = require('aws-sdk'); export ...

typescriptdefinitelytyped

Is there a way to restrict the return type of a function property depending on the boolean value of another property?

I'm interested in creating a structure similar to IA<T> as shown below: interface IA<T> { f: () => T | number; x: boolean } However, I want f to return a number when x is true, and a T when x is false. Is this feasible? My attempt ...

typescript

Issue with MUI icon import: React, Typescript, and MUI type error - Overload does not match this call

Within my component, I am importing the following: import LogoutIcon from "@mui/icons-material/Logout"; import useLogout from "@/hooks/auth/useLogout"; const { trigger: logoutTrigger } = useLogout(); However, when utilizing this compo ...

reactjstypescriptmaterial-ui

Ensuring that an object containing optional values meets the condition of having at least one property using Zod validation

When using the Zod library in TypeScript to validate an object with optional properties, it is essential for me to ensure that the object contains at least one property. My goal is to validate the object's structure and confirm that it adheres to a sp ...

typescriptvalidationzod

Routing with nested modules in Angular 2 can be achieved by using the same

Encountering a common issue within a backend application. Various resources can be accessed through the following routes: reports/view/:id campains/view/:id suts/view/:id certifications/view/:id Note that all routes end with the same part: /view/:id. ...

javascriptangulartypescriptroutesangular-ui-router

Guide on deploying a Node.js and Angular application on Google Cloud Platform

I currently have a setup where both my nodejs backend and angular frontend app are located in the same directory. The angular app generates build files in a static folder, and the nodejs backend serves the HTML file using the following code snippet: //Exp ...

node.jsangulargoogle-cloud-platform

Error: Attempting to access the value property of a null object within a React Form is not possible

I am currently developing a form that includes an HTML input field allowing only numbers or letters to be entered. The abbreviated version of my state interface is outlined below: interface State { location: string; startDate: Date; } To initiali ...

javascriptreactjstypescript