Update the appearance by utilizing ngModelChange

Is it possible to style an element using ngModelChange? I attempted the following method, but it was unsuccessful

<input class="input" [(ngModel)]="counter" (ngModelChange)="$event > 2 ? [style.border-color]='#ff4d4d' : [style.border-color]='#dbdbdb'" type="number">

I am aware that I can achieve something similar with

<input class="input" [(ngModel)]="counter" (ngModelChange)="$event > 2 ? error=true : error=false" type="number" [style.border-color]="error ? '#ff4d4d' : '#dbdbdb'">

However, I would like to see if it is possible to eliminate the 'error' attribute and directly assign the style to the input based on the condition

htmlcssangulartypescript

Answer №1

Instead of utilizing the `ngModelChange` function, you have the option to utilize regular style binding with a condition based on the value of `counter`, which is analogous to the `$event` parameter in `ngModelChange`:

<input [(ngModel)]="counter" [style.border-color]="counter > 2 ? '#ff4d4d' : '#dbdbdb'" class="input" type="number">

For a demonstration, check out this stackblitz.

Answer №2

Implementing property binding [style] within an event binding (ngModelChange) may not be achievable due to the conflicting nature of view and Model interactions.

Answer №3

To streamline your code, consider using a function-based approach.

HTML

<input class="input" [(ngModel)]="counter" (ngModelChange)="changeColor($event)" type="number" [style.border-color]="color"  type="number">

.TS

color="dbdbdb";
  changeColor(event) {
    if(event > 2){
      this.color = "#ff4d4d";
    }else{
      this.color = "#dbdbdb";
    }
  }

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

Stop my ::after element from interfering with my select dropdown menu

Check out this JSFiddle I created to showcase my issue: JSFiddle I am currently working on a customized dropdown menu using an icomoon icon instead of a V. While the design looks great, the ::after pseudo-element for the parent container is causing issues ...

htmlcssdrop-down-menu

`resolve() and then() taking precedence over asynchronous operations`

I recently came across a tutorial on promises that explained: const promise = new Promise((resolve, reject) => { // Perform asynchronous tasks // If successful resolve(); // If fails reject(); }); After trying to implement this, I haven't had ...

javascriptangularpromiseangular-promisees6-promise

JavaScript fails to function properly on FireFox

I'm currently troubleshooting a script that works in Chrome but not in FireFox. I suspect it's due to the webkit syntax, so I tried converting it to a standard gradient without success. Can you help me identify what's causing the issue? Web ...

javascriptcss

In TypeScript version 2.4.1, the fontWeight property encounters an error where a value of type 'number' cannot be assigned to the types of '"inherit", 400'

When attempting to set the fontWeight property in TypeScript, I encounter the following error: Types of property 'test' are incompatible. Type '{ fontWeight: number; }' is not assignable to type 'Partial<CSSProperties>&a ...

javascriptcsstypescriptmaterial-designmaterial-ui

Ways to adjust the positioning of an image

Seeking assistance, I am currently working on building a portfolio using HTML while following a tutorial. I utilized undraw to insert an image but unfortunately, the image is fixed to the right-hand side: I would like to position the image below my icons, ...

javascripthtmlcss

Generating data types based on the output of functions

I'm currently working on optimizing my typescript react code by reducing repetition. I'm curious to know if there's a way to generate a type based on the return type of a known function? For example: const mapStateToProps = (state: StoreSt ...

reactjstypescripttypescript-typings

I'm looking to remove an angular-cli from my system

My current Angular version is 2.4. I encountered a problem recently. I received this error message: Uncaught ReferenceError: __ng_jsonp____req0_finished is not defined at. To address this issue, I have decided to downgrade to version 2.3 of Angular. To ...

angular

Is it possible to use HTML text as a CSS selector with JavaScript?

I've been searching for a solution to this issue but haven't found anything that works for me. Check out this code on jsfiddle. Person1 and Person2 both have class="from" and the CSS selector is .from so it applies to both. However, I want it ...

javascriptjquerycss

Pictures in Windows 7 have shifted to the left

After a recent migration to the Windows 7 operating system at my company, I encountered an issue. While using the same Visual Studio 2010 master file that was working fine on my Windows XP machine, I noticed that all the images below were now shifted to t ...

asp.nethtmlcss

Cutting imagery to create a new design element

https://i.sstatic.net/IAh0h.jpg There is an image above with 6 gears (circles with pointy edges). My goal is to separate them into individual pictures and, on each picture's hover, have a relevant line with text appear. How can I achieve this? The a ...

javascripthtmlcss

Having trouble retrieving the Ionic 2 slides instance - getting a result of undefined

As I attempt to utilize the slides and access the instance in order to use the slideto functionality programmatically, I find myself encountering the issue of receiving 'undefined' back despite following the documentation. Here is my TypeScript ...

angulartypescriptionic-frameworkionic2

What could be causing the TailWind CSS Toggle to malfunction on my local server?

While working on designing a sidebar for a ToDo page using Tailwind CSS, I encountered an issue with implementing a toggle button for switching between dark mode and light mode. In order to achieve this functionality, I borrowed the toggling code snippet f ...

htmlcsstailwind-css

Implementing Multiple Identification using JavaScript and PHP

I need to complete a simple task. Here is the code snippet: echo' <div class="col-sm-12" id="recensioni_titolo"> <form role="form" id="review-form" method="post" action="php\insert_comment.php"> ...

javascriptphphtmlattributes

JavaScript providing inaccurate height measurement for an element

Upon loading the page, I am trying to store the height of an element. To achieve this, I have utilized the jQuery "ready" function to establish a callback: var h_top; var h_what; var h_nav; $(".people").ready(function() { h_top = $(".to ...

javascripthtmljquerycss

Stop the css animation from playing

I created a slideshow using HTML and CSS, and I'm looking to implement a feature where the slideshow pauses when my mouse hovers over it. I attempted to achieve this by using -webkit-animation-play-state: paused;, but unfortunately, it only pauses one ...

htmlcssanimationslideshow

Leverage JavaScript or CSS to create a paper button without the ink effect

Currently, I am utilizing JavaScript to dynamically create paper-buttons in the following manner: function createButtons(dieDefaults) { for(var i = 0; i < dieDefaults.length; i++) { var btn = document.createElement("paper-button"); var txt = d ...

javascriptcsspolymerpolymer-1.0

Ways to incorporate a background image using CSS

I tried to add a background image using CSS, but unfortunately, I was unsuccessful in my attempts. body { font-family: Arial, Helvetica, sans-serif; } /* .login-form{ width: 400px; } */ /* Full-width input fields */ input[type=text], input[type ...

javahtmlcss

Tips for retrieving corresponding values from a TypeScript dictionary object?

I am currently working with a dictionary object that is filled in the following manner: const myDictionaryElement = this.myDictionary["abc"]; In this case, myDictionaryElement contains the values: ACheckStatus: "PASS" QVVStatus: "READY" VVQStatus: "READ ...

javascriptnode.jsangulartypescriptdictionary

Transforming static files into MySQL records

I have a task at hand where I need to convert around 4000 HTML text files into MySQL database entries. One way to approach this would be to modify the HTML files slightly so they resemble XML, then use XSLT to transform the XML data into MySQL INSERT state ...

mysqlhtmlxmlxslttransform

By employing the $watch method, the table disappears from the div element

I've integrated the isteven-multi-select directive for my multi-select dropdown functionality. By providing it with a list of thingsList, it generates a corresponding checkedList as I make selections. Initially, I used a button to confirm the selecti ...

javascriptjqueryhtmlangularjsangular-datatables