Lien entre .ts et .html avec Ionic
Le fichier .html représente l’interface visuelle de la page. Il affiche les contenus statiques (balises html, texte..) mais aussi les contenus dynamiques (variables).
Le fichier .ts contient une classe avec des attributs et des méthodes. C’est ici que vous définissez les comportements et les valeurs dynamiques de votre applications.
Les liens entre les deux fichiers se fait de manière transparents par le biais des mécanismes d’Angular.
Afficher une variable
Nous allons transmettre la valeur d’une variable du fichier src/pages/contact.ts à la vue src/page/contact.html.
On commence par créer un attribut dans .ts :
unAttribut : string = "Formulaire de contact";
Capture d’écran
On affiche ensuite la valeur de l’attribut dans la page .html en utilisant une liaison dynamique {{ maVariable }}
<h1>{{unAttribut}}</h1>
Capture d’écran :
Votre page contact.html affiche le contenu de la variable créée dans contact.ts.
Il est claire que pour cet exemple un simple contenu texte aurait suffit!
Récupérer les données d’un formulaire
Mettons rapidement en place un formulaire ans le fichier contact.html avec le code suivant :
<form (ngSubmit)="logForm()">
<ion-item>
<ion-label>Nom</ion-label>
<ion-input type="text" [(ngModel)]="formulaire.nom" name="nom"></ion-input>
</ion-item>
<ion-item>
<ion-label>Message</ion-label>
<ion-textarea [(ngModel)]="formulaire.description" name="description"></ion-textarea>
</ion-item>
<button ion-button type="submit" block>Ok</button>
</form>
Capture d’écran :
La propriété (ngSubmit) permet de relier la méthode de classe logForm() à l’événement ‘submit’ tandis que [(ngModel)] assure liaison de données bidirectionnelle entre les entrées de vos modèles et les variables de votre définition de classe.
Affichage :
Du coté de la définition de classe (src/pages/contac.ts), on définit l’attribut formulaire :
formulaire = {nom:"",description:""};
puis la méthode logForm() :
logForm(){
alert(this.formulaire.nom)
}
Capture d’écran :
Testez l’application sur la page contact :
Liaison dynamique
La liaison peut être dynamique ce qui permet une mise à jour du contenu d’une variable (dans .ts) depuis la vue (dans .html). Nous allons illustrer cette fonctionnalité avec un exemple concret.
Nous allons ajouter un compteur de caractères pour le message qui s’affichera en dessous du formulaire à travers la liaison {{ nbCaractere }}:
<p>Nombre de caractères : {{nbCaractere}}</p>
Capture d’écran :
On rajoute l’événement keyup (relâchement d’une touche ) sur le champ textarea
Le code du coté du chier .ts ressemble à celui-ci : on définit la propriété nbCaractère ..
nbCaractere = 0;
et la méthode compte() qui alimente sa valeur.
compte(){
this.nbCaractere = this.formulaire.description.length;
}
Capture d’écran :
Il vous suffit de tester votre application. Vous remarquez que la valeur de nbCaractère se met automatique à jour quand vous écrivez :
