Change color border Item if input.value > 0

Ionic Framework ionic-v3
1

HTML

<ion-item>
    <input type="text" [(ngModel)]="firstName" name="firstName" placeholder="First name"  style="border:none" [readonly]="firstNamerReadyOnlyFlag">
      </ion-item>

CSS

.item {
    border-bottom: 2px solid #afafaf !important;
}
2

You may be able to do this using [ngStyle] or [ngClass]…

<ion-item>
    <input [(ngModel)]="firstName" [ngStyle]="{'border-color': firstName.length ? 'red' : 'transparent'}">
</ion-item>

<ion-item>
    <input [ngClass]="firstName.length ? 'active' : 'inactive'">
</ion-item>

(not tested, so you will probably need to look at the docs linked above)

3

it is not true :neutral_face:

4

Can you elaborate?

If you’re getting an error you might try something like …

ngStyle

[ngStyle]="{'border-color': firstName && firstName.length ? 'red' : 'transparent'}"

ngClass

[ngClass]="firstName && firstName.length ? 'FOO' : 'BAR'"

This will add the class. It’s up to you to define styles for the class ( e.g. .FOO{border-color:red} ).