IONIC - 3.2 Realization of a project

Click here for more videos available on our youtube channel !

Now that Ionic is installed, we can open the project folder we just created. Inside we find several folders and files, including the node_modules packages. We go to the src folder, then to the app subfolder, and we open one of the HTML pages. We quickly notice quite specific tags, for example <ion-app>: these are Ionic components — standard HTML tags prefixed with ion-. No need to memorize them all: every component is documented on the official Ionic website ionicframework.com, with the installation guide, UI components, native APIs and integrations for Angular, React, Vue and the CLI.

A first change on the home page

We open home.page.html. Inside we can see the page title in <ion-title> as well as the toolbar title in <ion-toolbar>. Let's make a small edit. We clear the default content, keep a simple paragraph, and add some text such as "here is a text". Right below it we add an Ionic button:

<p>{{ text }}</p>
<ion-button (click)="onChangeText()">click here</ion-button>

The (click) binding is Angular syntax that says: when the user clicks the button, call the onChangeText() method of the component. We display the value of the text property using interpolation.

Now we go to home.page.ts to write the corresponding logic. We declare a class property text = 'Default beginning of text' and add a method onChangeText() that assigns a new value to it:

text = 'Default beginning of text';

onChangeText() {
  this.text = 'changed';
}

When we save and look at the running app, the initial text is displayed. As soon as we click the button, Angular calls onChangeText(), the text property is updated, and the new value is automatically reflected in the template thanks to data binding. That is all for the beginning of our project — see you in the next video to continue.