Text, Buttons and Images

Text, Buttons and Images

In this tutorial, we’ll be touching on Ionic Components – how do you use them and where do you find them. Before continuing, you need to have Ionic4 installed and know how to start and run ionic apps.

Let’s start off by creating a fresh new Ionic4 project name LottoGenerator. As you might have guessed, our app will generate lotto numbers. Run the command below to create your project.

ionic start LottoGenerator blank --type=angular

Then run your project

cd LottoGenerator
ionic serve

You should have your project running. Open up the code using your favourite editor (I use Visual Studio Code). Before we touch any code, let me explain how the project files are laid-out.

So we have the src directory which contains all your code plus assets. Your code (TypeScript files and HTML files) will go inside the app folder and any asset you plan on using (Images, Videos, Documents or any downloadable file) goes inside the asset folder.

As you can see, within the app folder we already have the home page generated for us. Within the home folder, all you need to worry about at this moment is home.page.html, home.page.scss and home.page.ts – the rest of the files are not important at this moment.

%d bloggers like this: