[Tutorial]: Ionic tutorials(Template binding in ionic)

image source
Repository: Ionic Github Repository

Software Requirements:
Visual Studio Code(Or any preferred code editor)

What you will learn:
In this tutorial you would learn to how to

• Bind the template of your ionic project to your logic using the methods listed below

Difficulty: Intermediate

Tutorial
Today, this tutorial would cover all the concepts of template property binding in ionic that I've learnt over the period of time which I've been developing. If you're familiar with ionic some may not be new but for the sake of those who are starting up with ionic I'll try to cover all alike.

What is Template Binding?
In lay man's terms, this is binding your logic to your view. Meaning that these are the methods you use to edit or modify the things we see in our html and Css through our typescript(In the case of ionic).

The methods that are going to be covered in this tutorial are:

1. ViewChild and Input
2. Interpolation.
3. Angular Directive Binding
4. Default Package binding

To cover these, I'll take examples of each explaining this concept.
View Child and Input
View Child
ViewChild is an inbuilt functionality that comes with ionic and angular for referring to elements in the template. There is always some controversy about why this is used instead of simple interpolation and the answer is simply that the ViewChild gives more room for dynamically changing values in our template. If still unclear the example below should elucidiate.

Input
Inputs are rather similar to the ViewChild but are different because they can be used to refer to input that are made not directly to the view of the template file for the typescript file. To simplify that, in the example of the custom component from my last tutorial, I used the @input to refer to the values collected from the view which were not in a different page from where the component was.
Note: The input can also be used directly for the template of the component it is being used in.

How to use ViewChild and Input

import { Component, ViewChild } from '@angular/core';//Import the functionality
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;//Simply refer to whatever component you would like to use it 

  scrollToTop() {
    this.content.scrollToTop();
  }
}

And to use input

import { Component, Input, } from '@angular/core';

@Component({
  selector: 'expandable',
  templateUrl: 'expandable.html'
})
export class ExpandableComponent {
 
  @Input('scrollArea') scrollArea: any;
  @Input('headerHeight') headerHeight: number;
 
 
  constructor() {
 
  }
 
  ngOnInit(){
      this.AreaOfPage = this.scrollArea
      //You could use the values you got from the view in various ways.
}

Interpolation
Interpolation is the most common binding technique and is familiar to all angular users because it has been there from the inception. Interpolation does not require any imports and simply directly searches your .ts file for variables that have the similar name of the referred file.

How to interpolate

Page.ts

Export PagePage {

public data: any = "This is the data declared in the view"

Constructor(){
}

}

And now in the template

Page.html

<ion-content>
  <h1>{{ data }}</h1>
</ion-content>

This is what we have in the view.

Angular Directive Binding
This is another common binding technique used but it comes with angular functionality. The two going to be explained here are ngIf and ngFor.

ngIf displays a template or whatever component it is placed in based on a boolean preset in the logic file. If the boolean returns true the view shows and if it returns false, the view does not show.

Example of use

Page.ts

Export PagePage {

public visible: boolean: true;
public data: any= "This is bound to the visible variable"

Constructor(){
}

}

And now our template.

Page.html

<ion-content>
  <h1 *ngIf="visible">{{ data }}</h1>
</ion-content>

ngFor
This is used for binding lists to arrays in ionic. It loops over all the values in the array and displays them in the template. This is the recommended list display for ionic as seen in its documentation.
Note: This could be used for any display tag for example buttons, icons and anything else the view can display multiple times.

Example of use

Page.ts

Export PagePage {

public visible: boolean: true;
public data: []=[1,2,3,4,5,6,7,8,9,10]

Constructor(){
}

}

And now our template.

Page.html

<ion-content>
<ion-list>//loops through the array
  <ion-item *ngFor="let items of data">{{ data[item]}}</ion-item>
  
</ion-content>

Output of this

Default package binding
This can be used in various ways and is usually used by people who have been developing for some time. Default package binding is used for preset ionic components such as slides, fabs and other ionic components that have quite a high amount of functionality.

For this tutorial, I would be using a slider as an example.
Sliders are preset components in ionic which are used in various ways from start up pages to slides that show products in a store e.t.c.

The first time I used this, I was trying to get the slider to restart auto play when interacted with(By default this ends the autoplay).

How to use this
For such a thing, I imported the slider into the page's logic and referred to it using the ViewChild. The difference between this method and using the normal viewChild is that the you would have to state the data type of whatever component you want to interact with after importing that data type as shown below. This helps you use the preset functions that are available for this data type.

@ViewChild(Slider) slide: Slides; //Thjs last part states the type of file that is being gotten from the view

For a complete practical application

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
  @ViewChild(Slides) slides: Slides;

  goToSlide() {
    this.slides.slideTo(2, 500);
  }
}

With these template binding techniques you can easily refer to any component in your view and easily edit or interact with it. This is very similar to Phaser and if you would like to see how this can be done in that simply indicate in the comment section.

To see all the code used in this tutorial, you could visit my github page where it is simplified for easier comprehension.
See you in the next.