Issue encountered with dynamic ngStyle variable: ERROR Error: Unable to locate a supporting object 'ngStyleSmall'

I have defined two variables for ngstyle

ngStyleSmall = {
        width: '150px !important',
        'max-width': '150px',
    };

    ngStylemedium = {
        width: '250px !important',
        'max-width': '400px',
    };

ls_style:string
ls_style="ngStyleSmall" // will be fetched from database 

<mat-form-field [ngStyle]="ls_style">  
     <input  [(ngModel)]="code" name="code"  matInput placeholder="Co."> 
</mat-form-field>

In the html ng model, I need to assign a variable dynamically. How can this be achieved?

angulartypescript

Answer №1

To assign the value of ngStyleSmall to ls_style, use the following code snippet:

this.ls_style = this["ngStyleSmall"];

Check out the demo.

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

Redirect the user to the shop page in Angular 2 if they already have

How can I set up a redirect for the User ID (this.authTokenService.currentUserData.id) if they are the owner of a shop? owner_id: number; private sub: any; ngOnInit() { this.sub = this.httpService.getShops().subscribe(params => { ...

ruby-on-railsapiangular

Parentheses are automatically wrapped around the implicit return of arrow functions

Currently, I am utilizing Visual Studio Code along with Prettier, and I have noticed that the function: (token: string) => this.token = token is being transformed into: (token: string) => (this.token = token) This modification seems to decrease r ...

angulartypescriptvisual-studio-codearrow-functionsprettier

Posting data from an Angular 2 frontend to an Express server: A step-by-step

Seeking guidance as a beginner trying to understand the process of sending contact form data from Angular 2 to a Node/Express server. Currently, I have Angular 2 hosted on localhost:4200 and the express server running on localhost:3000. However, when attem ...

node.jsangularexpress

What is causing this error/bug to show up in Angular?

I encountered an error while working on my Angular project that incorporates both front-end and back-end development with Python Flask. Even though the page updates correctly, a database-related error is being displayed in the console. Below are the snippe ...

javascriptpythonangulartypescript

There is no overload that fits the current call | Typescript, React, and Material UI

Embarking on my TypeScript journey with React and Material UI, I am hitting a roadblock with my initial component. // material import { Box } from '@material-ui/core'; // ---------------------------------------------------------------------- ...

reactjstypescriptmaterial-uireact-typescript

refreshing the webpage's content following the completion of an asynchronous request

I am working on an Ionic2 app that utilizes the SideMenu template. On the rootPage, I have the following code: export class HomePage { products: any = []; constructor(public navCtrl: NavController, public navParams: NavParams, private woo: WooCommer ...

javascriptnode.jsangularionic-frameworkionic2

Guide to making a Material Design Radial effect animation

I am looking to create a unique toolbar effect by following the material design radial reaction choreography guideline. https://i.stack.imgur.com/6oB8r.gif I want to achieve this using an angular 2 transition, but I need some guidance on how to implement ...

cssanimationangulartypescript

Leveraging the Image data type in SQL Server to showcase images in an Angular 2.0 environment, with the response handled by Express

I am receiving the following response from Express and I am looking to display the supertendentsSignature image in Angular 2. Database: SQL Server Dataytpe : Image ORM: Sequelize Datatype of SuperintendentsSignature column is Blob Framework : Express Fro ...

sql-servernode.jsangularexpress

Angular2/Typescript: Transforming a Javascript/Typescript Date into a C# DateTime string on the client side

Currently immersed in an Angular2/Typescript project, I am faced with the task of sending a date to a C# backend. Despite my extensive research, all I could uncover through Google searches was information on converting the date on the backend side. My la ...

c#angulartypescript

Struggling to connect JSON information to a dynamically loaded sub-component

I'm currently working on dynamically loading a child component from the parent component. The goal is to pass some parameters from the parent to the child, which will then be used in the child component to make a service call and retrieve data from a ...

angularangular2-directives

npm encountered an error while trying to update Angular 4

Looking to update Angular2 to Angular 4 and encountering an issue with the following command: npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular ...

node.jsangularnpm

Angular4 Error: Unable to link to 'ngClass' as it is not recognized as a property of 'input'

Currently, I am facing an issue in my project where I am utilizing lazy loading. Specifically, within my registration module, I am attempting to utilize the [ngClass] directive to append an 'invalid' class when there are validation errors present ...

angulartypescript

Failed to set the reference: The first argument includes an undefined property. This error occurred within the context of

My journey with Firebase began just 4 days ago, although I've been a bit inconsistent. My goal was to create a user in the database, and while the user was successfully created, I encountered an issue when trying to return to the profile picture page. ...

angularfirebasefirebase-realtime-databaseionic3failed-to-connect

Is there a way to package extra files along with `NodejsFunction` in Node.js?

I am looking to add another HTML file to the source code, like shown below. https://i.sstatic.net/OyxDM.png Here is my current code: const mailerFunction = new aws_lambda_nodejs.NodejsFunction(this, 'ApiNotificationHandler', { runtime: lambd ...

node.jstypescriptaws-lambdaaws-cdk

Working with dual generic parameters in a function

Here is a function I am using: bind<T, K extends keyof T>( data: T[], bindedData: T[], key: K, newKey: string ) { } I'm trying to use two generic parameters, but my attempt here did not work: bind<T, K extends keyof T> ...

typescripttypescript2.0

Enable a fraction of a category

Imagine having a structure like this interface User { name: string; email: string; } along with a function like this updateUser(user: User) { } As currently defined, updateUser cannot accept only a name (updateUser({name: 'Anna'} would fa ...

typescript

What is the best way to attach a value to an attribute of a web component in Angular?

In all honesty, I am quite new to Angular and still learning the ropes. Currently, I am faced with a debugging challenge related to one of the users encountering an issue with my web component library. Within this library, there is a custom element create ...

htmlangularlit-element

What led the Typescript Team to decide against making === the default option?

Given that Typescript is known for its type safety, it can seem odd that the == operator still exists. Is there a specific rationale behind this decision? ...

javascripttypescriptcoding-style

When I click on a tab section to expand it, the carat arrows all point upwards. Only the arrows corresponding to the selected section should

click here for imageIt appears that there are four tabs, each with a click function on the carat icon. When I expand one tab, all carats point upwards instead of only the selected one appearing. accountSelection(account) { if (!this.selectedAccoun ...

angularhtmlcss

What is the best way to extract a nested array of objects and merge them into the main array?

I've been working on a feature that involves grouping and ungrouping items. A few days ago, I posted this question: How can I group specific items within an object in the same array and delete them from the core array? where some helpful individuals ...

javascriptarraysreactjstypescriptecmascript-6