Modify the dynamic style of an Angular input field

Question

Modify the dynamic style of an Angular input field

Looking for assistance with a text box

<input type="text" [ngStyle]="(show_div===true) ? {'border-color':'red','color':'red'} : {'border-color': 'green','color':'green'}" [(ngModel)]="values[i]"/>

When the show_div variable is true, I want to style it with

{'border-color':'red','color':'red'}

, and if it is false, then with

{'border-color': 'green','color':'green'}

. However, initially, I would like the textbox and text color to be black. Even though green and red are working correctly, the text is set to green initially which is not desired.

If anyone has a solution, I would greatly appreciate it. Thank you!

angular typescript

Answer 1

Answer №1

To receive a more precise response, please provide the corresponding TS code. Based on the details given, it seems that the initial value of show_div is undefined. In this scenario, you should include an additional condition in your ternary statement like so:

<input  type="text" [ngStyle]="(show_div===true) ? {'border-color':'red','color':'red'} : show_div === undefined ? {'border-color': 'black','color':'black'} : {'border-color': 'green','color':'green'}" [(ngModel)]="values[i]"/>

However, embedding these styles directly in your HTML can make it overly verbose and challenging to comprehend. Personally, I recommend defining these styles in your stylesheet and assigning them to a class. Then, dynamically switch between classes within your component instead of altering the styles.

Answer 2

To receive a more precise response, please provide the corresponding TS code. Based on the details given, it seems that the initial value of show_div is undefined. In this scenario, you should include an additional condition in your ternary statement like so:

<input  type="text" [ngStyle]="(show_div===true) ? {'border-color':'red','color':'red'} : show_div === undefined ? {'border-color': 'black','color':'black'} : {'border-color': 'green','color':'green'}" [(ngModel)]="values[i]"/>

However, embedding these styles directly in your HTML can make it overly verbose and challenging to comprehend. Personally, I recommend defining these styles in your stylesheet and assigning them to a class. Then, dynamically switch between classes within your component instead of altering the styles.

Modify the dynamic style of an Angular input field

Answer №1

Similar questions

Prohibit using any as an argument in a function if a generic type is

Guide to Generating a Library Using Angular-CLI

The trouble with React Navigation encountered with TypeScript: This Entity Cannot Be Invoked

Tips for preventing repetition of code in multiple entry points in Rollup

What sets React.HTMLProps<HTMLDivElement> apart from React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>?

Creating TypeScript declaration file for exporting JavaScript function

Sizing the Angular CDK overlay backdrop appropriately when connecting it to a component

Experiencing a "HEROES not found" error while following an Angular guide

Struggling to implement cookie functionality in Go language

A step-by-step guide on integrating Detox with jest (ts-jest) and Typescript in a react-native app

Import a Component Dynamically Using a Variable in AngularJS

Typescript encounters Duplicate error when method overloading is implemented

Style the date using moment

Angular interceptor allows the execution of code after the outgoing request has completed its process

Could it be possible for TypeScript inference to directly infer the value and omit the key in the process?

Using AngularJS to inject a service into a static property of a standard class

Creating a specification for a type that lacks a specific concluding character

Nebular specializes in crafting personalized registration solutions

How can I handle the different data type returned by ReactDom.render?

Can NODE_PATH be configured in Typescript?