Is there a way to alter the color of the send button after typing into my input tag on Angular 6?

How can I modify the color of the send button in Angular 6 when text is entered into an input field? I need to update the color of the send button in the image below once text has been typed into the input field. 

      <div class="conversation">
        <input id="chatMessageBox" row="1" placeholder="continue typing.." autocomplete="off" autocorrect="off"
          autocapitalize="off" spellcheck="false" class="text-input" [(ngModel)]="message"  (keydown)="sendMessageUsingKeypress($event)">
         
        <div class="send">
          <i class="material-icons" (click)="onSubmit(message)">
            send
          </i>
          <br>
        </div>
      </div>
Here, my goal is to change the color of the send button after entering text into the input box.

angulartypescript

Answer №1

Here's a simple way to apply Angular style classes dynamically: 

[style.background-color]="message && message != '' ? 'red' : 'green'"  [style.color]="message && message != '' ? 'black' : 'white'"

<div class="send" [style.background-color]="message && message != '' ? 'red' : 'green'"  [style.color]="message && message != '' ? 'black' : 'white'">
          <i class="material-icons" (click)="onSubmit(message)">
            send
          </i>
          <br>
        </div>

Answer №2

Implement NgClass

Example:

[ngClass]="{'highlighted': content.length > 0, 'normal': content.length === 0}"

Answer №3

consider giving this a shot

[style.color]="message.length > 0 ? 'white' : 'red'"

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

Creating Typescript types based on the values of other props: A guide

Can the TypeScript prop type be dynamically changed based on the runtime value of another prop? For instance type MyComponent = { propA: boolean | string propB: typeof propA boolean ? number : string } Is it feasible to determine the prop type of p ...

javascriptreactjstypescriptreact-select

"Encountered a type error with the authorization from the credentials provider

Challenge I find myself utilizing a lone CredentialsProvider in next-auth, but grappling with the approach to managing async authorize() alongside a customized user interface. The portrayal of the user interface within types/next-auth.d.ts reads as follo ...

typescriptnext.jsprismanext-auth

Repetitive cycling through an array

My array consists of classes: const transferClasses = [ { id: "c5d91430-aaab-ed11-8daf-85953743f5cc", name: "Class1", isTransfer: false, children: [], }, { id: "775cb75d-aaab-ed11-8daf-85953743f5cc", ...

javascriptarraystypescriptrecursiontail-recursion

Ionic - Retrieve data from a Universal Resource Identifier

When using my application, users have the option to select and crop images using Ionic Native - Crop. Once they have cropped their image, I will receive the URI of the image, for example: file:///storage/emulated/0/Android/data/com.myApp/cache/15353694789 ...

javascriptangulartypescriptionic-frameworkuri

Turn off Inline CSS in Angular Universal

While rendering a site on the server with Angular Universal, the resulting page looks great. However, the source code of the pages contains an excessive amount of inline CSS (more than 50% of the document > 500kb), leading to slow download times especia ...

angularangular-universal

Error: The TranslateService provider is not found and needs to be added to the

When attempting to make translation dynamic in angular2 using the ng2-translation package, I encountered an error message: Unhandled Promise rejection: No provider for TranslateService! zone.js:388Unhandled Promise rejection: No provider for TranslateSe ...

angulartranslation

The issue arises when attempting to use the search feature in Ionic because friend.toLowerCase is not a valid function

I keep encountering an error message that says "friend.toLowerCase" is not a function when I use Ionic's search function. The unique aspect of my program is that instead of just a list of JSON items, I have a list with 5 properties per item, such as f ...

jsonangulartypescriptionic-frameworkionic3

When using TypeScript, a custom property name within a type declaration must explicitly point to a predefined symbol

An error has occurred in ...component.ts (..,..): A computed property name in a type literal must directly refer to a built-in symbol. Error message: Cannot find name 'any'. I am seeking an object that contains strings that have another stri ...

typescript

Dealing with redirecting authentication in Angular 2

We are working on a web application built with Angular 2 that interacts with a secure REST-API to retrieve data. When making the first request to the REST-API, it responds with a URL and a redirect(302) status code, prompting a GET request. However, Angul ...

angularhttpauthenticationhttp-redirectcas

When utilizing the @Prop decorator in TypeScript, the compiler throws an error prompting the need to initialize the prop

Currently, I am utilizing Vue in combination with TypeScript along with the 'vue-property-decorator' package. When attempting to utilize a prop as shown below: @Prop({ default: '' }) private type: string An error is triggered by the ...

typescriptvue.jsvuejs2vue-componenttslint

The Angular2 promise resolves before the web service call has finished executing

I have a service in Angular 2 that contains a function responsible for providing data for a dropdown list. This particular function returns a promise. Below is the code snippet from the service: getStuff(): Promise<Stuff> { return t ...

angulartypescriptpromiseangular-promise

Encountering an issue with Angular 4 polymorphism: Getting an error stating, "Cannot find field 'childs' on the parent type while attempting to interpolate."

I am struggling to implement polymorphism in my Angular 4 project. Unfortunately, I am encountering an error when trying to access a member in a child class. The error message thrown by the compiler 'ng build --prod' is: /$$_gendir/app/app.compon ...

angulartypescriptangular2-template

Jest snapshot tests are not passing due to consistent output caused by ANSI escape codes

After creating custom jest matchers, I decided to test them using snapshot testing. Surprisingly, the tests passed on my local Windows environment but failed in the CI on Linux. Strangely enough, the output for the failing tests was identical. Determined ...

typescriptjestjssnapshotts-jestansi-escape

Retrieving header information in Angular 6

I am currently working on an example that I found on this website, but I seem to be facing an error that I can't figure out. Even after carefully reviewing my code, I'm still unable to pinpoint the mistake. Specifically, when I use "response =&g ...

angularrxjsangular-httpclient

Double-tap bug with Image Picker in Typescript React Native (non-expo)

Well, here’s the situation - some good news and some bad news. First, the good news is that the code below is functioning smoothly. Now, the not-so-good news is that I find myself having to select the image twice before it actually shows up on the clie ...

javascripttypescriptreact-nativecommand-line-interfacereact-native-image-picker

`How can I troubleshoot an Angular project's *ngIf structural directive using Chrome?`

Seeking a way to include Angular source code and source map into my Angular CLI project for easier debugging of directives such as *ngIf in Chrome. Is there a method to attach a debugger to ng_if.ts using configuration in angular.json or by adding a sourc ...

angulardebuggingwebstormsource-maps

Use the date-fns max function to identify the latest date in an array of date strings

The Dates string array is created using data from the backend object in the following manner: const dates: string[] = this.data.map((item:any) => item.date.jsdate); Here is the resulting array: dates = [ Thu Jan 12 2015 00:00:00 GMT+0530 (India T ...

javascriptarraysangulartypescriptdate-fns

What is the best way to decouple the data layer from Next.js API routes?

Currently, I am working on a project using Next.js with MongoDB. My setup involves using the MongoDB client directly in TypeScript. However, I have started thinking about the possibility of switching to a different database in the future and how that would ...

typescriptnext.jsdependency-injectiondata-access-layernext.js13

When executing NextAuth with the given auth options, it raises an error message stating "Incompatibility of types for 'adapter.createUser' between these specific types."

Currently, I am working on a project using Next.js 14 and attempting to configure NextAuth with the app/router. Unfortunately, I have encountered a type error that is proving difficult to resolve. Below is my route.ts file: // ./app/api/[...nextauth]/rout ...

typescriptnext.jsprismanext-auth

Analyzing performance metrics of TypeScript front-end web applications

Currently, my front end is built using Angular9 and TypeScript. I am looking to enhance my application with various performance metrics related to page load time recommended by the W3 working group W3 performance working group. What steps should I take t ...

typescriptperformance-testingw3c