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

in utopian-io •  6 months ago

ionic.jpg
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.

Screenshot (55).png

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
Screenshot (56).png

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.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for your contribution @yalzeee.
We suggest the following points listed below for improvements in your next tutorial:

  • Improve your language in your tutorial. Well-written text makes it easy for the reader to understand what he is explaining.

  • Put more images in your tutorial to make it more intuitive for the reader to read through to the end of your contribution.

  • It is important to always have proof of your work at the end of your contribution.

Thanks again for your work on developing this tutorial. We are waiting for more tutorials.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for your review, @portugalcoin! Keep up the good work!

Hello! Your post has been resteemed and upvoted by @ilovecoding because we love coding! Keep up good work! Consider upvoting this comment to support the @ilovecoding and increase your future rewards! ^_^ Steem On!

Reply !stop to disable the comment. Thanks!

Hello! I find your post valuable for the wafrica community! Thanks for the great post! We encourage and support quality contents and projects from the West African region.
Do you have a suggestion, concern or want to appear as a guest author on WAfrica, join our discord server and discuss with a member of our curation team.
Don't forget to join us every Sunday by 20:30GMT for our Sunday WAFRO party on our discord channel. Thank you.

Hello @yalzee ,
Are you on discord? I need to contact you thanks .

Posted using Partiko Android

·

Sure I'm @yalzeee#6695

Hello @yalzeee your post has been featured on the Stach Post Review Article
Thanks for using the Stach Tag.
Keep Being Creative!.

Courtesy - Stach Curation team

Hi @yalzeee!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Hey, @yalzeee!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!