IONIC - 3.2 Realization of a project

Click here for more videos available on our youtube channel !

Now that we have downloaded Ionic, we can open and view the project folder we created. Here it is, and we find inside several folders and also files, there for example we have the packages, we will go directly to the source folder, we will go to the "app" sub-folder, and consult the HTML page, and very quickly we realize that there are quite specific HTML tags. Indeed, for example, the "ion-app" tag it is a beacon but with the Ionic component at the beginning. But don't panic, you will find all these components in the documentation on the official website of "ionicframework.com", you will find the whole doc with the installations, Ui Component, Native APIs, Angular, React, Vue and CLI. You will not be left alone. On our side we will go to the HTML page of "home.page.html" and Inside we find the title of the page right here "ion-title", as well as the title of the toolbar "toolbar". And so we, we will try a modification that we can make. So this we delete, we will keep some text with the p tag like this, we're going to take out what we're not interested in, like that, and we're going to add "here's a text", quite simply. And just below we will put an Ionic component, so "ion-button", we will put "click here" we close the tag, and we will add in this opening tag some Angular code. Quite simply, we will tell him, that when we click on it, we will put an "onChangeText()" parameter and we will see what happens. Now we go to the "home.page.ts" page we will then write our program, we will declare "text = 'Default beginning of text', like this, just below, we will put our method "onChangeText" and inside we will put "this.text= 'changed';". Quite simply, when the button is clicked, the text will be changed. We don't forget the parentheses, I close them. And voila, so I replace the text by writing the variable directly with text. And here I click here and the text has been changed. And that will be all for our beginning of the project I am waiting for you in the next video for the rest of this project.