Set style of a focused element dynamically

Ionic Framework ionic-v3
1

Hi,

I have a list of items like this:

  <ion-list>
    <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>
    </ion-item> 
  </ion-list>

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?

regards

2

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

 <ion-list>   
  <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>
    </ion-item> 
  </ion-list>

with the following code:

  changeColor(item, color) {
    item.style.borderBottomColor = 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?

3

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

and look what you get in your changeColor function

4

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

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

Hi, RCODeGOD,

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.

regards

6

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)="theItem.style.borderBottomColor = parent.color" (ionFocus)="theItem.style.borderBottomColor = 'transparent'"></ion-input>
</ion-item>

In scss you also have to set a border like:

ion-item {
    border: 2px solid transparent;
}
7

Hi avishai_peretz_dev,

I did

theItem
theItem.png2036×557 81.3 KB

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

8

Hi RCODeGO,
,

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

System:

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

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

What am I missing here??

9

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>
        </td>
        <td>
          <ion-input type="{{item.Type}}" [(ngModel)]="item.Value" (ionFocus)='changeColor(theItem, parent.color)' (ionBlur)='changeColor(theItem, empty)'></ion-input>
        </td>
      </tr>
    </table>

with

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