how to change send button color when I enter some text in my input tag in angular 6?

Question

how to change send button colour when I enter some text in my input tag in angular 6? In the image I have to change colour of send button when my text is entered in input text 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 i want to change color of send when i enter some text in inputbox

Answer 1

Simple way use angular style [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

Use NgClass

ex.

[ngClass]="{'color-1': message.length > 0, 'color-2': message.length === 0}"

Answer 3

尝试这个

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