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

Question

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.

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’t put a fixed link to it, because on each page there will be a different link. I have a page called register-account which is Register Account, I would like the footer component on the login-account page changes to the sign-up-account page as soon as you click on the component.

Answer 1

<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);
  }

}

Answer 2

In the possession of for example Home.html, typhoon:

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

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

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