Ionic: การใช้งาน input ร่วมกับตัวแปร string

สร้างตัวแปรชื่อ fullname และแสดงค่าของตัวแปร fullname
จากนั้นสร้าง input ขึ้นมาพร้อมกับผูกไวักับตัวแปร fullname
เมื่อแก้ไขข้อความใน input ค่าของตัวแปร fullname จะเปลี่ยนไปด้วย
list

แก้ไขไฟล์ src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

  fullname: string;

  constructor(public navCtrl: NavController) {
    this.fullname = 'Jack';
  }

}

ประกาศตัวแปร fullname เป็นชนิด string

แก้ไขไฟล์ src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>
    Fullname: {{fullname}}
  </p>
  <ion-item>
    <ion-label>Fullname</ion-label>
    <ion-input type="text" [(ngModel)]="fullname"></ion-input>
  </ion-item>
</ion-content>

นำตัวแปร fullname มาแสดงผล
และสร้าง input โดยที่ผูกไว้กับตัวแปร fullname
เมื่อแก้ไขข้อความใน input ค่าของตัวแปร fullname จะเปลี่ยนไปด้วย

[BOXMOBILEDEV] Ionic 3 EP3 : ngModel , ngFor และ Event Click