How to select HTML/ionic element in js?

Ionic Framework ionic-v3
1

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">
    <ion-item-sliding>
      <button ion-item (click)="goToSessionDetail(session)">
        <div class="container">
          // Removed to simplify example
        </div>
      </button>
    </ion-item-sliding>
  </ion-card-content>
</ion-card>

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.

2

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

3

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>
  </ion-card-content>
</ion-card>

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) {
  scheduleCard.style.backgroundColor = session.color;
}

Does that help?

2 Likes
4

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

1 Like
5

@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.

Thanks!

6

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) {
  scheduleCard.style.backgroundColor = session.color;
  session.clicked = true;
}

or you can just add it directly in the function:

changeCardColor(session, scheduleCard) {
  scheduleCard.style.backgroundColor = session.color;
  scheduleCard.classList.add('schedule-card-clicked');
}

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

Here’s a good read on this: http://juristr.com/blog/2016/01/learning-ng2-dynamic-styles/

5 Likes
7

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

1 Like