Ionic Components

In our previous lecture, we tackled what an Ionic Page is and how to create it. These pages are the building blocks of our mobile app.

Now, let’s learn about Ionic Components. These components are the building blocks of our Ionic Pages. Technically, Ionic Components are just Angular Components. It consists of both a VIEW and a MODEL. You can add the view attribute of the component in the HTML and then add the model behavior using JavaScript. In addition, you can also control its appearance by adding a custom CSS for a specific component.

The Ionic framework provides a set of components that helps you easily construct a user-friendly interface into your Ionic Page. It includes the buttons, the pop-ups, the cards, the modals and many more.

All Ionic view components have a prefix of “ion-” which you can add in your html page. So for example, we have ion-button for a button, ion-label for a label, ion-checkbox for a checkbox and so on and so forth.

In this lecture, we will explore the different types of components and show the steps on how to integrate it in our ionic page.

First, let’s open up a browser and check the Ionic Framework website. So just search for Ionic framework and then documentation.

Next, select Components. In this page, you will see all of the available components. We have the Action Sheets, Alerts, Buttons, Cards, Menus, and many others.

For now, let’s try to add a very basic example. We will use an Ionic Button in our About page. So, let’s just go down over here and select “button”.

We have here different types of buttons that you can use for your app.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.