Set style of a focused element dynamically



I have a list of items like this:

    <ion-item *ngFor='let item of parent.items'>
      <ion-label fixed>{{item.Name}}</ion-label>
      <ion-input type="{{item.Type}}" [(ngModel)]="item.Value"></ion-input>

The parent also has a color property.
When an input element gets the focus the whole items border-bottom-color is set to the primary color by default.
I want this set this to the parents color property. This comes from a database so I cannot work with CSS classes but have to use ngStyle to access the color property. Also I cannot work with pseudo classes like :active inside an element style.
I experimented with ionFocus and ionBlur of the ion-input but could not access the ion-item.
Is there a way to do this?



Some more searching brought me to this, which should theoretically work:

  <ion-item #theItem *ngFor='let item of parent.items' >
      <ion-label fixed>{{item.Name}}</ion-label>
      <ion-input type="{{item.Type}}" [(ngModel)]="item.Value" (ionFocus)='changeColor(theItem, parent.color)' (ionBlur)='changeColor(theItem, empty)' ></ion-input>

with the following code:

  changeColor(item, color) { = color;

As I said, theoretically. In praxis, I get a runtime rrror

 Cannot set property 'borderBottomColor' of undefined.

This should sctually work, why does it not?


Should work.
Try to console.log("theItem: ", theItem);

and look what you get in your changeColor function


You can change the border bottom color in the scss file when focused like this:

#theItem:focus {
    border-bottom-color: red;



no I can’t. Setting a fixed color via style sheet is no problem, but these would have to be known at design time; like I said, the color to set comes from a database and can be anything the user has choosen.



Ok, this should work:

<ion-item #theItem *ngFor='let item of parent.items' >
      <ion-label fixed>{{item.Name}}</ion-label>
      <ion-input type="{{item.Type}}" [(ngModel)]="item.Value" (ionFocus)=" = parent.color" (ionFocus)=" = 'transparent'"></ion-input>

In scss you also have to set a border like:

ion-item {
    border: 2px solid transparent;


Hi avishai_peretz_dev,

I did

I don’t understand it. In How to select HTML/ionic element in js? this worked. What is the difference?



this still doesn’t work. I even updated the components in case of a broken installation.
My current ionic info:

cli packages: ...
    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.0


    Node : v6.11.4
    npm  : 3.10.10
    OS   : Windows 10

Environment Variables:

    ANDROID_HOME : not set


    backend : pro

What am I missing here??


It is definitely the Ion-Item component that causes the error.
Replacing the ion-item with any other component (button, li, ion-card) doesn’t produce the desired effect, but the function call produces no runtime error.

Very(!) ugly, but working:

    <table style="width: 100%;">
      <tr *ngFor='let item of paret.items' #theItem>
        <td class="ionlabel">
          <ion-label fixed>{{item.Name}}</ion-label>
          <ion-input type="{{item.Type}}" [(ngModel)]="item.Value" (ionFocus)='changeColor(theItem, parent.color)' (ionBlur)='changeColor(theItem, empty)'></ion-input>


    .ionlabel {
        width: 1%;
        white-space: nowrap;
        padding-left: 16px;
        font-size: 16px; 
        font-weight: 400;