How to Assign a page for each button in a list?

Ionic Framework ionic-v3
1

Hello, I am developing a bible application, I already have all structured, bible books of the new and old testament in different pagins as seen below:

image
aaa.PNG843×743 33.3 KB

The problem is, as I do to add a page to each button of the bilia, since the contents of each book I have done for pages, each name of the Bible tine a different page but I do not know how to add it until ahota tried to assign A page calling it of the suggestive form and works perfect:

import { Component } from '@angular/core';
import { LibrosantPage } from '../librosant/librosant';
import { NavController, NavParams } from 'ionic-angular';

@Component(
{
  selector: 'page-antiguo',
  templateUrl: 'antiguo.html'
})
export class Antiguo 
{
    public libros=  LibrosantPage
    
    constructor(public navCtrl: NavController, public navParams: NavParams) 
    {
    
    }
    items = [
      'GĂ©nesis',
      'Exodo',
      'Levitico',
      'NĂșmeros',
      'Deuteronomio',
      'JosĂșe',
      'Jueces',
      'Rut',
      '1 Samuel',
      '2 Samuel',
      '1 Reies',
      '2 Reies',
      '1 Cronicas',
      '2 Cronicas',
      'Esdras',
      'NehemĂ­as',
      'Ester',
      'Job',
      'Salmos',
      'Proverbios',
      'Eclesiastés',
      'Cantares',
      'IsaĂ­as',
      'JeremĂ­as',
      'Lamentaciones',
      'Ezequiel',
      'Daniel',
      'Oseas',
      'Joel',
      'AmĂłs',
      'Abdias',
      'Jonas',
      'Miqueas',
      'Nahum',
      'Habacuc',
      'SofonĂ­as',
      'Hageos',
      'ZacarĂ­as',
      'MalaquĂ­as'
    ];
    
  itemSelected() 
  {
    this.navCtrl.push(LibrosantPage);
  }
  
}

But it opens all the books of the page, no matter if I press genesis, aexodo, leviticos, simpre opens the page (librosantPage); The question is: how do I add more pages to my itemSelected, this is my Old Testament HTML:

<ion-header>
  <ion-navbar>
      <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
      <ion-title>Antiguo Testamento</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
    
  <ion-list>
    <ion-item ngFor="let item of items">
        <button ion-item *ngFor="let item of items" (click)="itemSelected()">
            {{ item }}
        </button>
    </ion-item>
  </ion-list>
    
</ion-content>
2

You need to pass item in itemSelected(item) then in your method so this:

itemSelected(item) {
    this.navCtrl.push(LibrosantPage, { book: item });
}

After that you need to read the item from navParams in your LibrosantPage. Then load the book reference from your json file.

I hope that helps.

3

Thanks was very helpful, you can already create a page for each icopno, just had to create a component next to each name of the bible.

1 Like
4

Me podrĂ­as facilitar tu cĂłdigo?
Me llamo mucho la atencion

5

claro, el cĂłdigo de la imagen es el siguiente.
el primer botĂłn solo abre LibrosantPage, los demĂĄs ItemDetailsPage, usted modifica los componentes para abrir diferentes ventanas.

import { Component, ViewChild } from '@angular/core';
import {  Nav } from 'ionic-angular';
import { LibrosantPage } from '../librosant/librosant';
import { NavController, NavParams } from 'ionic-angular';
import { ItemDetailsPage } from '../item-details/item-details';

@Component(
{
  selector: 'page-antiguo',
  templateUrl: 'antiguo.html'
})
export class Antiguo 
{
     @ViewChild(Nav) nav: Nav;   
    rootPage: any = LibrosantPage;
    pages: Array<{title: string, component: any}>;
    
    constructor(public navCtrl: NavController, public navParams: NavParams) 
    {
    
    }
    items = [
      { title: 'GĂ©nesis', component: LibrosantPage},
      { title: 'Exodo', component: ItemDetailsPage},
      { title: 'Levitico', component: ItemDetailsPage},
      { title: 'NĂșmeros', component: ItemDetailsPage},
      { title: 'Deuteronomio', component: ItemDetailsPage},
      { title: 'JosĂșe', component: ItemDetailsPage},
      { title: 'Jueces', component: ItemDetailsPage},
      { title: 'Rut', component: ItemDetailsPage},
      { title: '1 Samuel', component: ItemDetailsPage},
      { title: '2 Samuel', component: ItemDetailsPage},
      { title: '1 Reies', component: ItemDetailsPage},
      { title: '2 Reies', component: ItemDetailsPage},
      { title: '1 Cronicas', component: ItemDetailsPage},
      { title: '2 Cronicas', component: ItemDetailsPage},
      { title: 'Esdras', component: ItemDetailsPage},
      { title: 'NehemĂ­as', component: ItemDetailsPage},
      { title: 'Ester', component: ItemDetailsPage},
      { title: 'Job', component: ItemDetailsPage},
      { title: 'Salmos', component: ItemDetailsPage},
      { title: 'Proverbios', component: ItemDetailsPage},
      { title: 'Eclesiastés', component: ItemDetailsPage},
      { title: 'Cantares', component: ItemDetailsPage},
      { title: 'IsaĂ­as', component: ItemDetailsPage},
      { title: 'JeremĂ­as', component: ItemDetailsPage},
      { title: 'Lamentaciones', component: ItemDetailsPage},
      { title: 'Ezequiel', component: ItemDetailsPage},
      { title: 'Daniel', component: ItemDetailsPage},
      { title: 'Oseas', component: ItemDetailsPage},
      { title: 'Joel', component: ItemDetailsPage},
      { title: 'AmĂłs', component: ItemDetailsPage},
      { title: 'Abdias', component: ItemDetailsPage},
      { title: 'Jonas', component: ItemDetailsPage},
      { title: 'Miqueas', component: ItemDetailsPage},
      { title: 'Nahum', component: ItemDetailsPage},
      { title: 'Habacuc', component: ItemDetailsPage},
      { title: 'SofonĂ­as', component: ItemDetailsPage},
      { title: 'Hageos', component: ItemDetailsPage},
      { title: 'ZacarĂ­as', component: ItemDetailsPage},
      { title: 'MalaquĂ­as', component: ItemDetailsPage}
    ];
    
  itemSelected(page) 
  {
    this.navCtrl.push(page.component);
  }
}
6

Hey guys, english please!

7

I guess there aren’t going to be any new books added to the Bible any time soon, but I would prefer doing this in data-driven fashion, moving all the names of books and so forth into a separate JSON file. It would certainly help a lot with i18n, for one thing.