How to add a function to a ion-button (Solved)

im trying to get started with ionic 2 and its been one hell of a steep learning curve. right now im trying to understand how to make a button that once pressed will do a simple alert. but i cant find a good tutorial, and the documentation is not helping.

please can anyone give me a simple template to get started on and explain how it works.

any help would be appreciated thankyou in advance :slight_smile:

1 Like

Please visit https://ionicframework.com/docs/components/
It contains all self-explainable document.

create a method i your component like

 alert("Hello! I am an alert box!!");

go inside your html file

   <ion-buttons end>
      <button ion-button icon-only (click) ="alert()"  >
       <ion-icon name="search"></ion-icon>
     </button>
   </ion-buttons

so in which file do i place the alert method in

if you are using ionic 2 it should in the component.ts file. just start with a template by running the following in you $ ionic start myApp blank in your terminal and go into the and then generate a page
ionic g page --nameofthe page,

ive already set up a blank template and everthing.

I followed what "nivavparsana94 said and check the offical documentation.
however it still doesnt work.

in my home.html file :

  <button ion-button (click) = "showAlert()" icon-start large round color="dark">
    <ion-icon name="star"></ion-icon>
    clike me m8
  </button>

in my app.componets.ts file:


import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AlertController } from 'ionic-angular';

import { HomePage } from '../pages/home/home';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
title = 'testing mememmes';
  rootPage:any = HomePage;

  constructor(public alertCtrl: AlertController, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

      platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }

}

i really dont understand how all this works yet. the error i get when i click my button is “co.showAlert is not a function”

sorry for the noob questions but ive never had this much trouble understnding something like this before.

move the showalert function into the home component and can you please post your html file also. you need to move the showalert into the home component since you are calling it inside the home.html

did it work for you?

1 Like

showAlert() should be in home.component.ts
Remove from the app.components.ts

1 Like

werid thing is while though i got it to work i dont have a “home.componet.ts” only a home.ts

the 3 files i have for my home page is home.html,home.scss and home.ts

were is this "home.componets.ts file ment to be when ionic generat it

file name doesn’t matter. Only class name is. :slight_smile:
We put component in file name to easily identify that it is typescript file for respective html.
just like app.component.ts for app.html