How to add event (click) on a component?

Ionic Framework ionic-v3
1

I have a component called footer, this component will be on several pages, however this component on each page will lead to different different pages as soon as it is clicked. How do I do this?

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() {}
  
}
2 Likes
2

footer component

  @Component({
     selector: 'a-footer',
     template: `
       <div>{{footerText}}</div>
       <button ion-button (click)="doIt()">Footer Button</button>
      `
    })
    export class AFooterComponent {
      @Input() footerText:string
      @Output() footerClicked = new EventEmitter()
      
      doIt() {
        this.footerClicked.emit({value:this.footerText})
      }
    }

home.page component create the event handler to be passed into footer component doFooterClicked

@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html'
})
export class HomePage {

  appName = 'Ionic App';
  userCourse =[]

  constructor(private navController: NavController) {
    
    this.userCourse = [{CourseName:"course one"},{CourseName:"course two"}]
  }
  
  edit4(_someStuff) {
    
  }
  doFooterClicked(_event) {
    console.log(_event)
    alert("footer clicked "+ _event.value)
  }

}

in the home.page html somewhere you create the component element

<a-footer [footerText]="'someText'"
          (footerClicked)="doFooterClicked($event)">
</a-footer>`
3 Likes
3

Hello @arraonksaunders.

I followed his steps and did as follows. As soon as I click on the footer button, nothing happens.

footer.html

-ion-footer>
  -ion-toolbar color="black-light">
    -button ion-button (click)='goToPage()' color="light" full clear>{{btnFooter}}</button-
  </ion-toolbar-
</ion-footer-

footer.ts

import { Component, Input, Output, EventEmitter } from ‘@angular/core’;

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

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

//SAÍDA DE DADOS
@Output() footerGoToPage = new EventEmitter();

constructor() {}

//TRANSIÇÃO DE PÁGINAS COM COMPONENTS
goToPage() { this.footerGoToPage.emit({value:this.btnFooter}) }

}

login-conta.html

-footer btnFooter=“REGISTRE-SE”></footer-

login-conta.ts
import { Component, Output, EventEmitter } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;

// IMPORTAÇÃO DE PÁGINAS
import { HomeUserPage } from '../home-user/home-user';
import { RecuperacaoContaPage } from '../recuperacao-conta/recuperacao-conta';
import { CadastroContaPage } from '../cadastro-conta/cadastro-conta';

@Component({
  selector: 'page-login-conta',
  templateUrl: 'login-conta.html',

})
export class LoginContaPage {
  
  //DATA-BINDING
  private image: string = 'assets/img/logo.png';
  private btnLogin: string = 'LOGIN';
  private btnRecuperacao: string = 'RECUPERAR CONTA';
   

  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  ionViewDidLoad() {}

  //TRANSIÇÃO DE PÁGINAS
  goToHomeUserPage() { this.navCtrl.push(HomeUserPage); }
  goToRecuperacaoContaPage() { this.navCtrl.push(RecuperacaoContaPage); }
  goToCadastroContaPage() { this.navCtrl.push(CadastroContaPage); }

}
4

the code in your login.html is incorrect… or it isnt copied correctly