Having an issue with the JS code that TypeScript compiler is generating. Here's an example class: // Class export class UserDTO { Id: number; FirstName: string; LastName: string; DateOfBirth: Date; getFullName(): string { ...
Can we instruct Angular to execute the init function (or any other lifecycle function or custom function) when the component input changes, or do we need to manually trigger that function from the parent component instead of modifying the input directly? ...
My data structure looks like this: export abstract class Person { ... } export class FPerson extends Person { a: A; b: B; } export class JPerson extends Person { c: C; } export class User { person: Person; } When dealing with the s ...
Having trouble organizing the build process for my frontend web app created with Angular 2 and TypeScript. This is the structure I'm working with: / - dist/ <-- transpiled .js files - src/ <-- .ts files - assets/ - bower_components/ ...
Currently, I am working on a project using Angular 1.x and the Material UI framework. While building, I encountered an unusual issue where I am unable to create a custom Toast (snackbar) with functioning buttons: /// <reference path="../../_All.d.ts"/& ...
Currently, I have two services in my application. ServiceA is non-singleton and provided to components through the Providers array, while ServiceB is a singleton that is listed in its module's Providers array. Both services work perfectly fine indepen ...
Is there a way to import a module from an external file into another TS file? Even after following the steps, when I tried to do so in VSCode, it gave me an error saying that the file 'XXX' is not a module: Here's the error I encountered I ...
I recently started working with angular2 and I'm trying to map a JSON response to an array of custom objects. The issue I'm facing is that when I try to access a variable with an underscore in its name, I encounter a compile error. I followed the ...
Let's consider the following scenario: We have a component called @permissions which contains a button that triggers a simple promise to set a value on another component called @MenuComponent. export class Permissions { constructor(private _menu ...
I am facing a challenge with integrating Typescript UMD modules into legacy code that does not follow any module pattern. My hope was to find a Webpack loader or plugin that could generate global variables for specific modules instead of treating them as ...
I am faced with the challenge of organizing files and folders within an Angular 4 project in a way that allows for easy reorganization. Currently, my approach looks like this: ├───core │ │ core.module.ts │ │ index.ts │ │ │ ...
The following code snippet is designed to retrieve an object from Firebase, specifically an array. this.item2 = this.af.object('/profiles/' + this.username + '/followers'); this.subscription5 = this.item2.subscribe(item => { ...
I'm facing an issue with deleting an item in my Angular CLI app using Sweet Alert as a confirmation dialog. The code snippet below is written in TypeScript: import { AuthenticationService } from '../../../services/authentication.service'; d ...
In my current Angular 4 application, I am faced with the challenge of populating a dropdown menu with data from an API response. Specifically, I am struggling to retrieve the necessary information for each section from the API. The API provides data on C ...
My objective is to automatically redirect users to the login page whenever a login attempt fails. I have implemented an interceptor to manage Http responses: export class HttpInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any& ...
Within parent.component.html The HTML code I have implemented is as follows: <button type="button" class="btn btn-secondary (click)="AddComponentAdd()">Address</button> <app-addresse *ngFor="let addres of collOfAdd" [add]="addres">< ...
I have a unique issue that I haven't been able to find a solution for on StackOverflow: Within an Angular 6 service, I am trying to call a function from another service using TypeScript. Here is the code snippet: Service1: myArray: Array<IMyInte ...
I tried implementing a login feature using web API with Angular 7, but encountered an error when using <form [formGroup]="loginForm" (submit)="loginFormSubmit()">. What could be causing this issue? https://i.sstatic.net/3M2a5.jpg login.component.ht ...
I am facing an issue. In my multi-module application with lazy loading, I encountered a strange behavior when trying to navigate between child lazy modules. Transition from top module to bottom child module works fine, but routing from one bottom child la ...
Currently, I am working on implementing a straightforward drag and drop feature. When dragging an item, my goal is to scroll the containing div by a specified amount in either direction. To achieve this, I am utilizing Angular Material's CDK drag an ...
Consider the following action type: interface SaveFoo { type: 'SAVE_FOO' payload: { id: string value: number } } I have a requirement to implement a saga that will apply throttling selectively. For instance, if the following actio ...
So I've got 2 TypeScript interfaces here: interface IObject1 { propOne: string, propTwo: string, ... } interface IObject2 { 'some.prefix.propOne': string, 'some.prefix.propTwo': string, ... } Is there a more concise ...
I am developing an app that offers courses in both English and French. My goal is to create a language dropdown header component that will be visible across all pages of the program. When a user selects a different language from the dropdown, I want the fo ...
I am currently working on a select element called district, which lists all the districts in the city. My objective is to apply a filter that will dynamically display only the leaflet markers corresponding to the selected district on the map. Any suggesti ...
I am currently using axios in conjunction with TypeScript. Below is a simple axios interceptor that I have implemented: // Adding a response interceptor axios.interceptors.response.use((response: AxiosResponse<any>) => { // Processing response ...
Is there a way to efficiently duplicate a TypeScript class without losing getters and ensuring that nested classes and array items have new references? I have attempted using JSON.parse(JSON.stringify(obj));, but this method does not copy the getters. On ...
I've been working on an AngularJS 1.7 application that's coded entirely in TypeScript, and there's always been one thing bothering me. Within my app.module.ts file, I have this piece of code that doesn't sit right with me: declare va ...
I am faced with a situation where I need to manipulate the CSS classes of an element generated by a third-party library for which I do not have access to the source code. While Angular typically recommends a specific method for adding and removing classes ...
Imagine a scenario where the need arises to use a conditional statement that performs the same action but calls a different method. const c = true; // just for illustration let b = ''; if (c) { b = 'method1'; } else { b = 'met ...
Hi there, I am currently working on creating a dynamic form using formArray in Angular. However, I have run into an issue with the error message "TypeError: Cannot read property 'controls' of undefined." import { Component, OnInit } from ' ...
One feature of my application involves displaying a table with rows retrieved from a database. The functionality responsible for fetching this data is an AJAX call, implemented as follows: getPosts(): Observable<Posts[]> { return this.http.post ...
Hey there! I'm currently working on updating a boolean value in my service when a button is clicked within my component. My goal is to trigger the setfunction and toggle the boolean value from true to false, and vice versa when the button is clicked a ...
I'm currently developing a search screen for an application and I've come up with three possible outcomes for the results section. If the user hasn't searched yet, then show nothing. If the user searches and the array is empty, display "no ...
In my Angular application, I have a functionality where users can upload two files for processing on the server. However, I am looking to add a feature that allows users to simply copy and paste the contents of the files into two textboxes instead of going ...
I am currently developing an angular application where I need to retrieve and process data from JSON in two different steps. To start, I have a JSON structure that is alphabetically sorted as follows: { "1": "Andy", "2": &qu ...
In my project, I have a connected component utilizing mapStateToProps and mapDispatchToProps along with the connect HOC from react-redux. My goal is to create concise and future-proof type definitions for this component. When it comes to defining types fo ...
I'm encountering an issue with TypeScript when trying to access an object from props.location.state. I found a workaround to get the object from state using the following code snippet: import React, { FC } from 'react'; import { RouteCompone ...
Is there a method to customize the close button in el-dialog and replace it with my own design? For instance, can I change the default close button located at the top left corner of the dialog? <el-dialog title="Tips" :visible.sync=" ...
Imagine having a simplified input structure like this: [ { type: "text", text: "how are you {name}" }, { type: "input", input: "name" }, { type: "text", text: "good to ...
Encountering conflicting rules on TS / React imports as a beginner, while using Eslint / Prettier. I'm getting an error stating 'React' is declared but its value is never read.. However, when I remove it, another error saying 'React&apo ...
Currently, I am encountering an issue while using the https://github.com/goatandsheep/react-native-dotenv package in my React Native app for managing .env files. Error: Cannot find module '@env' from 'src/api/api.ts' I am currently te ...
Below is a sample of the service function I am working with: getByIdWithCategory(id: number): Observable<Product> { const category = new Category(); category.name = 'sample category'; return this.httpClient.get<Product> ...
I am facing an issue with my handleSelect function: const handlerSelectBank = (event: React.ChangeEvent<{ value: unknown }>) => { setState({ ...state, buttonDisabled: false, selectedBank: event }); }; Upon execution, I encountered ...
I am currently working with an object that looks like this: export class Section{ singleLabel:string; pluralLabel:string; index:number; dataInterface:Interface; } My goal is to assign an interface to the dataInterface field, as I need to use the S ...
Can someone help me troubleshoot this issue? It's my first time using state management. The result I get when trying to fetch it from the state is not what I expected. https://i.sstatic.net/QD7o5.png Here is the reducer: import {createReducer, on} ...
I am currently working on a large web application that makes multiple calls to the server from various points. We are utilizing a token with a 15-minute lifetime, which means it uses the refreshtoken to generate a new token and refresh token once it expire ...
I have a const enum named ComponentId with values A, B, and C. Additionally, there is another const enum called BaseId with values D, E, and F which is used in multiple places. const enum ComponentId { A = 0, B, C } The challenge I am facing ...
Can anyone clarify TypeScript behavior in this scenario? JavaScript const test1 = [ ['a', 'b'], ['c', 'd'], ]; const test2 = [ ...[ ['a', 'b'], ['c', ' ...
I've developed a Protection feature that blocks users from directly accessing a specific URL, and it's functioning correctly. However, the issue arises when I try to refresh the page as the Protection feature ends up redirecting me. Below is th ...
I encountered an error in my visual studio code: Argument of type '(query: string) => void | Observable' is not assignable to parameter of type '(value: string, index: number) => ObservableInput'. Type 'void | Observable& ...
I'm facing an issue with my basic mesh box that has an onWheel listener. I need to pass the mouse event data to a handler function, but TypeScript keeps throwing errors related to ThreeEvent and WheelEvent, no matter how I attempt to use them. As sho ...
Is there a way, particularly in Typescript, to seamlessly move an export statement like the one below to an existing file and automatically update all files that import it? export const MyVar = 3; In the case of refactoring using Right Click > Refactor ...
this.authService.getmonthsandyear(this.id).subscribe(data => { this.authService.startdate(this.id).subscribe(start_date_data => { for (let a of data) { if ( a.year && a.month !== start_date_data[0].month && start_dat ...
Hey there, I'm facing a problem with creating a specific payload structure as shown in the example code snippet below. Everything was going well until I got stuck at the dynamic form part, and despite several attempts, I can't seem to figure it o ...
Currently, I am utilizing Cypress 9.5 to conduct tests on an Angular 13 application with a local PHP server as the backend. Throughout the testing process, I have encountered successful results when running the tests in the browser multiple times. However ...
I have defined the structure of MenuItem as follows in order to parse the response from the server side rest api: type MenuItem = { id: number; name: string; path: string; tree_id_path: string; children: MenuItem[]; }; The server s ...
I am looking to implement a validation in JavaScript or TypeScript for Angular where the start date cannot be more than 60 days after the end date is entered. The requirement is to enforce a "maximum range of 60 days" between the two input dates (dateFro ...
I recently upgraded my traditional react-native with redux App to the modern redux-toolkit and encountered an error: A non-serializable value was found in the state, in the path: `currentUserSessionData.data`. Value:, CurrentUserSessionData { "isOnb ...
I am struggling to load my API keys from a JSON file named api.json. The file structure is as follows: { "service1": ["apikey1", "apikey2"], "service2": ["apikey1", "apikey2"] } In order to manag ...
How can I specify to the type checker that tuples must consist of a function and valid arguments? For example: let expressions:TYPE[] = [ [(a:number, b:string)=>{},1,"ok"], // ok [(a:number)=>{},true] // error [(a:number)=>{} ...
Check out my TS playground here // I have colours const colors = { Red: "Red", Blue: "Blue", Green: "Green" } type TColor = keyof typeof colors; // Some colours have moods associated with them const colorsToMood = { ...
I have multiple input fields with corresponding buttons that enable the input when clicked. I would like the behavior of the buttons to work in such a way that when one button is clicked, only that specific input field is enabled while the others are disab ...
Being a beginner in the world of TypeScript, I am struggling to comprehend the error message and how to resolve it. This is the snippet of my code: app.put('/compareSpread' , async (req , res) => { const { roundedSpreadPercentage , cropId} ...
I am currently learning TypeScript and working on converting my project to TypeScript. However, I encountered an error while trying to use spread arguments. I have researched this topic, but I am still unsure of the correct usage. Here is my current appro ...
I'm a beginner with angular material and I'm struggling to get any image I upload to take the position of my avatar image. Firstly, the avatar image isn't showing up at all and secondly, when I try to upload an image, it doesn't display ...
One of the components I am using looks like this: const data: any[] = [] <Tiers data={data}/> This is how my component is structured: const Tiers = ({ data, }: { data?: any; }) => { console.log('data', data?.length!); ...
When encountering a typescript error, I notice that it is visible in my editor, but not in the browser or the terminal running npm run dev. However, the error does show up when I run npm run build. Is there a method to display type errors during npm run d ...
Currently, I have implemented a useEffect hook with two dependencies in the following way: useEffect(() => { ..... }, [apiData, currentMeasurements]); It's important to note that the apiData is fetched using useLazyQuery from apollo/client. Upon ...
Let's start with the following code snippet: let vAny: any = 10 let s1: string = vAny; console.log(typeof s1) In this scenario, I have explicitly defined that s1 should be a string. However, when inspecting the type of s1, it shows up as a number in ...
I'm currently in the process of developing a React application using a View/ViewModel architecture. In this setup, the viewModel takes on the responsibility of fetching data and providing data along with getter functions to the View. export default f ...
What is the recommended approach for changing the mouse cursor programmatically in Angular? For instance: HTML: <div [style.cursor]="cursorStyle">Content goes here</div> or <div [ngStyle]="{ 'cursor': cursorStyle ...
When utilizing the PrismaClient for database interaction, DateTime fields are returned as JavaScript Date objects instead of Unix timestamp numbers. Despite being stored as Unix timestamp numbers in the database itself, I require the dates to be retrieved ...
Insight Embarking on the creation of a React UI Library. Engaging with TS: 5.x, React: 18.x, Styled-Component: 5.x versions. Challenge Encountered Following deployment of the UI Library to the npm registry, executing yarn add my-custom-ui-library in a t ...
I encountered a strange issue while using a CLI that reads the capacitor.config.ts file. Every time the CLI reads the file, it throws a "ReferenceError: await is not defined" error. Interestingly, I faced a similar error with Vite in the past but cannot ...
OBJECTIVE I have undertaken a project to enhance my skills in React and TypeScript by developing a UI chat interface. The design requirement is that when a chat message has enough vertical space, its action buttons should appear stacked vertically to the ...