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.

Summary

This lesson explores the structure of an Ionic project, explaining the folder hierarchy and Ionic-specific HTML components found in the generated application. It demonstrates a practical modification by adding an interactive button to the homepage that changes displayed text through Angular event binding and TypeScript logic, showing the connection between the HTML template and the component class.

Key points

  • Ionic projects contain standard folders including src/ with subfolders for pages and components, all documented at ionic.io/docs
  • Ionic uses custom HTML tags (ion-app, ion-content, ion-title, ion-button) that provide built-in styling and functionality specific to mobile apps
  • Each Ionic feature (like home/) consists of two files: a .html template for the UI layout and a .ts TypeScript file for component logic
  • Angular directives like (click) bind user interactions to component methods, enabling dynamic behavior on button clicks
  • Variables declared in the TypeScript component class can be displayed and updated in the template, demonstrating data binding between logic and view

FAQ

Where can I find documentation for Ionic components and APIs?

Official Ionic documentation is available at ionic.io/docs, which includes comprehensive guides for all components, native APIs, and Angular integration.

How do you add interactivity to an Ionic button?

Use Angular's (click) event binding in the template like <ion-button (click)="methodName()"></ion-button>, then define the corresponding method in the component's TypeScript class.

What are the main parts of an Ionic page file structure?

Each Ionic page consists of a .html template file containing the UI layout with Ionic tags and a .ts TypeScript file containing the component class with properties and methods.