IONIC Section 4 - 4.6 Using Basic Ionic Components

Click here for more videos available on our youtube channel !

Hello everyone, in our budget plan, I want to create an app that looks like a mobile app and i basically want to have a header, a toolbar at the top that shows the app title, something like a budget plan, then I want to have the content below the toolbar where I want basically an input field where I can enter titles, names, description of the expense, then the value, the amount of the expense, a button I can press, then a list below of that where I basically express all my expenses at the very bottom with a small sum where I see the total sum of expenses. So, for that, if we look at the documentation, the “Content” category with “ion-app” and “ion-content”. “Ion app” should always wrap your Ionic app in its entirety, which basically ensures that certain styles and general behaviors are defined, so we can already do that. We can add "ion-app" here and we only use it once per HTML file, you can tell if you are using Angular, that it runs on only one and same page, an HTML file, you only use it as a global wrapper. Your root component, you don't use it never anywhere else. There we can have our “ion-content” here it is like this and this is a wrapper for the content of our main application. Now why add it? Well, because, for example, it controls scrolling and ensures that our content generally works properly and displays correctly. So we're going to add some Ionic content, but I also wanted there to be a header. So if we go back to the doc, and scroll down, you should find the “toolbar” area, and we will select the “ion-toolbar”. We can learn here that it is placed in an "ion-header", it will appear at the top of the content and that is exactly what we want. So in our Ionic application above "ion-content" I will add the "ion-header" here it is, and then the "ion-toolbar". Now in this toolbar we want to insert a title. So we go to the “ion-title” section in “ion-toolbar”. It is a component that defines the title of the toolbar. Here we see an example of use and we will repeat this example now. So inside "ion-toolbar" we can add the "ion-title" and name this budget plan. If I now save this and open the html file in a browser, we should get this result with our header of our budget plan. Once we have added these elements we can configure them so we return to the toolbar, here, so I come back on purpose so that you apply this work methodology well and I also want you to understand. So we come back on our toolbar documentation, and we can learn how to add buttons, so for example, a button allows us to add a new item and we see some general information. Examples of use, also with a previous button of which we will have need later not now and if we scroll further down we see the properties we can set and I'm interested in this color property that we can define as “primary”, “secondary” etc… So we go to our toolbar by adding a primary color to it, so "color=primary" and then we save. Now, looking for our app, we get this result this blue background color, but we also have the title color which has adjusted to white which is a separate component. So these components work together here, it's always good to know. So that's our header, and what about the content? We will see that in the next videos.