Search code examples
cssangularangular7

Changing the input's text color depending on it's value, Angular

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div class="form-group">
  <label class="col-md-4">What is the capital city of Italy?
  </label>
  <input type="text" class="form-control" formControlName="first_question" #first_question />
</div>

So, I want to make the input color to be red, unless the user inputs the correct answer which is rome? Any ideas? i tried this but it didnt work:

placeholder="Type" [style.color]="Type === 'rome' ? 'red' : 'green'"
Solution

  • First, you need to declare a variable in TS.

    TheCapitalOfItaly:string = '';

    then, in HTML:

    [(ngModel)]=="TheCapitalOfItaly" [style.color]="TheCapitalOfItaly === 'rome' ? 'green': 'red'"