CODEWITHSUNDEEP
ionic-frameworkionic3
John_guy
John_guy

Reputation: 11

Pass data from home.html to home.ts

I'm new to Ionic and I would like to know how I can pass data that is in between the <p></p> HTML tag to my home.ts file. I have tried doing getElementById but that doesn't seem to work. Also ViewChild but with zero results. I'd like to have some help concerning this question.

Upvotes: 0

Views: 8748

Answers (4)

Prashant
Prashant

Reputation: 1385

First try to understand that when you are working on Ionic, you are working on Angular but not Core Javascript.

and here is simple example that may help

home.html

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

@Component({
    templateUrl: 'build/pages/home/home.html'
})

export class HomePage {
    name: string;

    constructor(public navCtrl: NavController, private alertController: AlertController) {
    }

    showName() {
        console.log(this.name);
        let alert = this.alertController.create({
            title: 'Hello ' + this.name + '!',
            buttons: ['OK']
        });
        alert.present();
    }
}

home.ts

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

<ion-content padding>
    <ion-label>{{ name }}</ion-label>
    <ion-input [(ngModel)]="name"></ion-input>
    <button (click)="showName()">Click Me</button>
</ion-content>

Upvotes: 0

Dibyanshu Patnaik
Dibyanshu Patnaik

Reputation: 43

Taking the simple example of a Login page,

            <ion-item>
                <ion-label floating color="primary">Registered Email ID</ion-label>
                <ion-input [(ngModel)]="login.email" name="email" type="text" #email="ngModel" spellcheck="false" autocapitalize="off"
                    required>
                </ion-input>
            </ion-item>

            <ion-item>
                <ion-label floating color="primary">Passcode</ion-label>
                <ion-input [(ngModel)]="login.passcode" name="password" type="password" #password="ngModel" required>
                </ion-input>
            </ion-item>

The .ts code for this would be:

  login= { username: '', email:'', mobile:'', passcode:'' };

That is literally it! You can also go about without the login object and can declare variables like 

username: any
email: any

and so on; and directly reference them in the html as 

[(ngModel)]="username"

Hope it helps!

Upvotes: 0

user9757842
user9757842

Reputation:

From .ts -> html :

.ts-> varString : String = "Hallo world"; html-> {{varString}}

From html -> .ts depends of html tag

Ex. <input type=“text” name=“username” [(ngModel)]=“username”> username is username : String = ""; and it changes avry time you update the input. Similar to other html tags. You can also get elements by id or class using Element of ionic angular

Upvotes: 1

mohsen solhnia
mohsen solhnia

Reputation: 376

there is many way to pass data between html and ts, but you must have good understand about MVC design pattern. the MVC is the reason of why google introduced angular.

in angular (engine of ionic), your View(html in your project) knows everything about controller(ts file).

***** home.ts********

public MyName:string="jon";

 MyFunc1() 
  {
   alert(this.MyName); 
 }

 MyFunc2() 
  {
    this.MyName="other name"; 
    alert(this.MyName); 
 }

*****home.html*******

<input   type="text" [(ngModel)]="MyName"  >

<p>{{MyName}}</p>
<button ion-button (click)="MyFunc1()" >MyFunc1</button>
<button ion-button (click)="MyFunc2()" >MyFunc2</button>

. . .

if you change the value of MyName in ts, then it will change automatically in html and also if you change you input value (that it is binded to MyName) it will change the MyName value in model (in ts).

Selecting DOM in ionic isn't a right way to change models value.

Upvotes: 0

Related Questions