List with clickable Items that show alerts using Ionic 2


#1

Hi! I am using Ionic 2 to create a demo app so I start learning about this product :slight_smile:

I’m integrating it with MobileFirst Platform from IBM to use adapters and some other features. But I think my issue is related on how to use some Ionic components.

Basically, I have a service injected to my page.ts that retrieves some objects from a NoSQL database.
Using ion-list I was able to list all of them succesfully, but now I want to enhance that functionality making those items clickable in order to show an alert with further information obtained from that object that’s already filling the list item.

Here’s my HTML:

<ion-navbar *navbar secondary>
    <ion-title>La agenda de hoy</ion-title>
</ion-navbar>

<ion-content>
    <ion-list>
        <ion-item *ngFor="let item of delivery" (click)="displayDetails(item)">
            <h3>{{item.talk}}</h3>
            <p>Disertante: {{item.name}}</p>
        </ion-item>
    </ion-list>

</ion-content>

And this is my page.ts

import {Page, Alert} from 'ionic-angular';
import {NavController} from "ionic-angular/index";
import {ScheduleService} from '../../providers/schedule-service/schedule-service'

@Page({
  templateUrl: 'build/pages/agenda/agenda.html'
})
export class SchedulePage {
    
  schedule: any;
  delivery: any;
  times: any;
  nav: any;
      
  constructor(schedule: ScheduleService, nav: NavController) {
      console.log('---> Agenda: Page Initialized');
      
      this.schedule = schedule;
      
      this.loadSchedule();
  }
  
  loadSchedule(){
      this.schedule.load().then((results) => {
          
          let tm = [];
          
          for(var i=0; i < results.length; i++){
              
              if (tm.indexOf(results[i].time) == -1) tm.push(results[i].time);
              
          }
          
          console.log('---> times array', tm);
          
          this.times = tm;
          
          this.delivery = results;
          
      })
  }
  
  displayDetails(item){
      
      console.log('---> Clicked on talk: '+item.talk);
      let endTime = parseInt(item.time);
      endTime++;
      let msg = 'Disertante: '+item.name+'<br>Hora de inicio: '+item.time+':00<br>Hora de Finalizacion: '+endTime+':00<br>'
      
      let prompt = Alert.create({
          title: 'Detalles de la charla',
          subTitle: item.talk,
          message: msg,
          buttons: [
              {
                  text: 'Cerrar'
              }
          ]
      });
      
      this.nav.present(prompt);
  }
  
}

The final result shows the typical list but everytime I click the items no alert is being shown, and, in fact, I am getting no log event, so I am guessing this is definitely not working.

Is there something wrong with my code? I am using Ionic 2.0.0-beta.26

Thanks in advance!


#2

Ionic 2.0.0-beta26 is your CLI version and not the Ionic library version that your project is running against. To see the library version, execute ionic info in your project directory.


#3

Per an issue noted in the sample ionic-conference-app, I’ve had success making clickable list items by using a button styled as an ion-item.

So rather than <ion-item></ion-item> make the repeated elements <button ion-item></button>.

You can see your code as clickable items in the plunker: http://plnkr.co/edit/fkrFPeLIYBt4qH6VW6R5


#4

Oh! Ok, thanks!

So then I am using: Ionic 2.0.0 Beta 7!


#5

Sorry Evan! Had to unmark it, there’s somthing else not working there: the alert box.
How should I call it in Beta 7? I’ve seen that this particular behaviour and the life cycle have been changing a little bit from beta release to beta release.


#6

I just forgot to specify the navController for injection. Plunker updated:


#7

Awesome! Thanks!

I see it’s working on plunker but it is not different on what I’m doing for my mobile app (which is still not working properly) :frowning: I will keep on researching!