How can style my field on basis of condition?

Question

I need to style my input field border on the basis of input value length.

   <div  *ngFor="let o of options">         
               <input id="" type="text" [ngClass]="{{}}" placeholder="Search Value"(keyup)="search(o,$event)" />              
   </div>

Answer 1

You can add bindings to individual styles, not just classes, based on your properties/values/etc.

<div [style.border]="thing.length > 10 ? '1px solid red' : ''">
    ...
</div>

Answer 2

Please refere below stack overflow answer, he has given multiple ways to add classes dynamically based on conditions (assuming you already have input value length). You can add any css to classes not just border.

https://stackoverflow.com/a/41974490/3292176