Struggling with a simple task and encountering an error:
Code snippet below:
app.component.html
<div class="col-md-{{myvalue}}">stuff here</div>
app.component.ts
myvalue: string;
ngOnInit() {
this.myvalue('6');
}
Seeing the following error message:
Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures.
Any idea what I'm doing wrong?
To set a value to a string, you should follow this method:
myString: string;
ngOnInit() {
this.myString = 'Hello';
}
Give this a try,
app.component.html
<div [ngClass]="myvalue">...</div>
app.component.ts
myvalue: string;
ngOnInit() {
this.myvalue = 'col-md-'+'6'; //combine your value as string here
}
If you want to pass data using a function, you can do so by following this method,
myvalue: string;
ngOnInit() {
this.setValue('6');
}
setValue(val: string){
this.myvalue = 'col-md-'+val; //combine your value as string here
}
I suggest checking out this documentation as well, https://angular.io/api/common/NgClass
I would advise against following @shadowman_93's approach. Property binding exists for a reason, so there is no need to alter CSS decorators within your component. It is more logical to maintain 'col-md' in your template. This way, if modifications are required, they can be easily located in a clear and organized manner rather than buried in a string literal within your component. That would only lead to poor design choices.
Remember, strings do not function like functions do. Setting a string should not mimic calling a set function. In TypeScript, strings behave similarly to how they do in other programming languages.
ngOnInit() {
this.myvalue = '6';
}
I'm in the process of developing an authentication application, but I keep encountering the error message Invalid "code" in request when attempting to obtain a refresh token from the code provided by Discord. Below is a snippet of my reques ...
I'm currently exploring how to move an element from a list to a <div> and then see it transferred to another list. The objective is to allow users to drag items from one list onto the labels in a sidebar navigation, causing the item to switch t ...
We are currently facing a challenge with our Angular-built APP for Android phones. The logic has become quite intricate and we have decided to transfer it to our server, where it can be executed as a CRON job every hour instead of within the Phone APP it ...
I'm facing a situation where I have two definitions that are identical, but I need them to behave differently based on the value of the limit parameter. Specifically, I want the first definition to return Promise<Cursor<T>> when limit is g ...
Is there a way to properly test the canActivate function in Angular that returns a function which ultimately provides a boolean value? I attempted to create instances of ActivatedRouteSnapshot and RouterStateSnapshot, and then pass them into the canActiva ...
I encountered an error while attempting to decorate a class in my NestJS service. The Typescript code compiles without any issues, but I am facing this problem only in VSCode. Unable to resolve signature of parameter decorator when called as an expression ...
As a newcomer to Angular, I am looking to create a custom validator that can trim the input field of a model-driven approach form. However, I have encountered difficulties during implementation. When attempting to set the value using setValue() within th ...
I have a POST request point in my API where I need to track and store all work journals made by a worker. export const registerPoint = async (req: Request, res: Response) => { const user = res.locals.decoded; const {id} = user; const point = new Point ...
Tech stack: Angular v15 and Cypress V12 Despite successful runs of my component and end-to-end tests, I encounter peculiar terminal errors while running the tests. The issue could potentially stem from my Cypress configuration for shared commands. Here ...
When working with TypeScript in *.tsx files, particularly when copying code around, I frequently encounter the issue of an additional import line being added. This can be seen below: import React from "react"; // ? On Save "editor ...
Currently, I am working on an MVC project that involves the use of TypeScript. To access the types required for this project, I have also integrated React. To obtain the React types, I performed an npm install --save-dev @types/react (similarly for react-d ...
My current task involves parsing JSON Data from an API and organizing it into separate arrays. The data is structured as follows: [ {"MONTH":9,"YEAR":2015,"SUMAMT":0}, {"MONTH":10,"YEAR":2015,"SUMAMT":11446.5}, {"MONTH":11,"YEAR":2015,"SUMAMT":5392 ...
Looking for the most efficient method to display an element based on a selection from a dropdown menu in Angular 2. Despite trying various techniques, I have been unsuccessful in achieving the desired outcome! Below is the current implementation: HTML: ...
I'm facing an issue where I need to filter the objects within an array of objects based on keys and convert them into a different type of object. I attempted to solve it like this... const values = Object.keys(user).map((key) => {'refKey' ...
Encountered an error message that has puzzled me. I am eager to explore highstock.js and its associated files, but I'm uncertain about the best approach. Despite the chart displaying correctly, this error consistently arises. ...
Currently, I am utilizing the XLSX npm library to convert an Excel sheet into JSON format. However, all of the retrieved data is currently being returned as strings. To see a demo of the XLSX read process, you can visit this Stackblitz demo Is there a w ...
Currently, I am in the process of transferring some logic to an abstract class. Let's look at the abstract generic class with specific constraints: abstract class AbstractVersion< TModel extends object, TProperty extends keyof TModel, T ...
I am working with a simple code snippet like this However, within the method, the variable 'name' is being recognized as type any. Interestingly, when I hover over 'name' in the data, it shows up as a string. The Vetur plugin has alre ...
I am encountering an issue with the code provided below in two different applications developed using Angular 8 and 10. Strangely, it is not displaying the selected value in the Angular 10 app, while working perfectly fine in the Angular 8 app. <select ...
Working with d3 V4 can be both exciting and challenging. Despite my struggles to create a custom webpack bundle with other modules, I have managed to enhance the vanilla d3 bundle by adding multi-selection functionality. To facilitate this integration in ...