How to select HTML/ionic element in js?


Hi All,

I have been using ionic 2 for a few weeks now and love it. However, I’m not sure of the best practice to perform the following.

I have an custom ion-card that contains a button which fills the entire element so that it is clickable (as below)

  <ion-card class="schedule-card" *ngFor="#session of group.sessions">
  <ion-card-content class="content">
      <button ion-item (click)="goToSessionDetail(session)">
        <div class="container">
          // Removed to simplify example

What I am trying to achieve is that when the button is pressed, the background-colour of the parent ion-card class ‘schedule-card’ changes. I am very lost how to do this however. Any help would be greatly appreciated.

p.s. The reason I want to change the ion-card bg and not the button’s bg is due to the css design e.g.


Perhaps a simpler question is, how do I select a HTML element, class, div etc via the js file in an angular friendly way?


So without knowing your code for sessions, say you have something like this where your sessions include the color you want to change the card to:

sessions = [
    id: 1,
    color: "blue"
    id: 2,
    color: "pink"
    id: 3,
    color: "lightblue"
    id: 4,
    color: "red"
    id: 5,
    color: "hotpink"

Then you have cards like this (further simplified):

<ion-card #scheduleCard class="schedule-card" *ngFor="#session of sessions">
  <ion-card-content class="content">
    <button ion-item (click)="changeCardColor(session, scheduleCard)">Change color</button>

Where the current session is passed to the changeCardColor function, along with #scheduleCard which refers to the ion-card element itself. So then the changeCardColor function could be something like this:

changeCardColor(session, scheduleCard) { = session.color;

Does that help?

Set style of a focused element dynamically

@brandyshea You are a legend and I love you. Thank you so much!


@brandyshea Without pushing my luck, do you happen to know how I could apply an additional class to the element?

I see that ‘.style.backgroundColor’ is a DOM object model. Do I juse use .css({‘css’});, or is there a better way?

I want to add a class which contains some css fill-background animation.



When do you want to add it?

You can use [class] on the card like this (where schedule-card-clicked is the class you want to add, and session.clicked is a boolean):

<ion-card #scheduleCard class="schedule-card" *ngFor="#session of sessions" [class.schedule-card-clicked]="session.clicked">

or you could use [ngClass] like so:

<ion-card #scheduleCard class="schedule-card" *ngFor="#session of sessions" [ngClass]="{'schedule-card-clicked': session.clicked}">

Then in the function on click set it to true:

changeCardColor(session, scheduleCard) { = session.color;
  session.clicked = true;

or you can just add it directly in the function:

changeCardColor(session, scheduleCard) { = session.color;

or or you can create a directive to do all of this for you. :slight_smile:

Here’s a good read on this:


@brandyshea Thanks again for all your help. It’s been very useful. Much appreciated!