Topic 1 ( Ionic ) - Onclick Button

Onclick function 

Passing parameter "string" from users.html to user.html communicate through .ts file using onclick function.

users.html

<button ion-button (click)="onLoadUser('Syafiq')">User 'Syafiq'</button>

users.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {UserPage} from "./user/user";

@IonicPage()
@Component({
  selector: 'page-users',
  templateUrl: 'users.html',
})
export class Users {

  constructor(public navCtrl: NavController) {
  }

  onLoadUser(name:string){
    this.navCtrl.push(UserPage,{userName : name},{animate: true, direction: 'forward'});
  }
}

user.html

<ion-header>
 <ion-navbar>
  <ion-title>{{ name }}</ion-title>
 </ion-navbar>
</ion-header>

<ion-content padding>
 <p>Hi, I'm {{ name }}</p>
<ion-content>

user.ts

import { Component, OnInit } from "@angular/core";
import { NavParams } from "ionic-angular";

@Component({
 selector: 'page-user',
 templateUrl : 'user.html'
})

export class UserPage implements OnInit {
 name : string;

 constructor (private navParams: NavParams){

 }

 ngOnInit(){
  this.name = this.navParams.get('userName');
 }
}

Source:

Maximilian Udemy Instructor