How to add the event (click) on a Component in Ionic2?

Question

How to add the event (click) on a Component in Ionic2?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a component called footer, it contains the following code:

footer.html

<ion-footer>
  <ion-toolbar color="black-light">
    <button ion-button color="light" full clear>{{btnFooter}}</button>
  </ion-toolbar>
</ion-footer>

footer.ts

import { Component, Input } from '@angular/core';

import { CadastroContaPage } from '../pages/cadastro-conta/cadastro-conta';

@Component({
  selector: 'footer',
  templateUrl: 'footer.html'
})
export class FooterComponent {

  //INSERIR OS ELEMENTOS NOS BOTÕES
  @Input() btnFooter: string;

  constructor() {}

}

This component will be on several pages, so I can not put a fixed link to it, because on each page there will be a different link. I have a page called register-account that is CadastroContaPage, I would like the footer component in the login-account page to change to the account-register page as soon as it clicks on the component.

ionic ionic2

asked by anonymous 28.01.2017 / 16:37

2 answers

0

In the file for example Home.html , type:

<ion-content padding>
    <button ion-button block color="danger" (click)= 
    "openPage2()">Tela2</button>
</ion-content>

And in the Home.ts file, type inside the main class:

openPage2() 
{
    this.navCtrl.push(TeladoisPage);
}

11.09.2018 / 16:03

retrieve item position in listview Remove php file extension, less than one folder

score 1 · Accepted Answer

<ion-footer>
  <ion-toolbar color="black-light">
    <button ion-button color="light" full clear (click)="abrirTela">Abrir Nova Tela</button>
  </ion-toolbar>
</ion-footer>

import { Component, Input } from '@angular/core';
import { CadastroContaPage } from '../pages/cadastro-conta/cadastro-conta';
//-- Importe para a navegação entre paginas --
import { NavController} from 'ionic-angular';
//------------------------------------

@Component({
  selector: 'footer',
  templateUrl: 'footer.html'
})
export class FooterComponent {

  //INSERIR OS ELEMENTOS NOS BOTÕES
  @Input() btnFooter: string;

  // Adiconar no construtor a instancia do navControler
  constructor(public navCtrl: NavController) {}
  /*
  * Metodo utilizado para abrir a tela desejada
  */
  abrirTela(){
    //Vai abrir a tela desejada, onde a mesma deve ser importada, assim, vou achamar a cadastroContaPage
    this.navCtrl.push(CadastroContaPage);
  }

}