CODEWITHSUNDEEP
angulartypescript
Akhil Raghav
Akhil Raghav

Reputation: 343

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

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

Upvotes: 1

Views: 805

Answers (3)

Sneha Pawar
Sneha Pawar

Reputation: 1127

try this 

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

Upvotes: 0

phucnh
phucnh

Reputation: 1115

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>

Upvotes: 2

De Wet van As
De Wet van As

Reputation: 1000

Use NgClass

ex. 

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

Upvotes: 1

Related Questions