[Ionic] 디자인 컴포넌트와 변수의 연결 – ngModel, ngIf

action-sheet.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Action Sheet Page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <input type="text" [(ngModel)]="name">
  <p>Hello, {{name}}</p>
  <p *ngIf="name">Welcome</p>
  <button ion-button block (click)="presentActionSheet()">
    Show Action Sheet
  </button>
</ion-content>

action-sheet.ts

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

@Component({
    templateUrl: 'action-sheet.html'
})
export class ActionSheetPage {
    name: string = "";

    constructor(public actionSheetCtrl: ActionSheetController) {
    
    }

    presentActionSheet() {
        let actionSheet = this.actionSheetCtrl.create({
            title: 'action sheet demo',
            buttons: [
                {
                    text: 'Delete',
                    role: 'destructive',
                    handler: () => {

                    }
                },
                {
                    text: 'button',
                    handler: () => {

                    }
                },
                {
                    text: 'cancel',
                    role: 'cancel',
                    handler: () => {
                        
                    }
                }
            ]
        });
        actionSheet.present();
    }
}