Ionic From Scratch: Working With Ionic Components

What are Ionic Components? 

Ionic Components, for the most part, are what make your hybrid app come to life.
Components provide the user interface for your app, and Ionic comes bundled with over 28 components. These will help you create an amazing first impression of your app. Of course, you can't use all of these 28 components in a single app. How to decide which ones to use?

Well, luckily there are components that you will find in almost every app. In the
previous article I showed you how to navigate to another view using the Ionic Component Button. All we needed to create this button was the following code:

<button ion-button>Navigate to Info</button>

Here, we're already using one of the Ionic components available to us. That’s the beauty of Ionic: we don't have to concern ourselves with how the button
component is constructed, all we need know is how to properly use the relevant component. 

When to Use Ionic Components? 

As a beginner, I doubt that there will ever be an app you develop that will not make use of Ionic Components. It is also possible for one to develop your own custom components, but that is a topic for another day for advanced usage of Ionic & Angular.

With the above said, let’s have a look at how to use the most commonly used components in Ionic mobile
applications:

Slides Component

The slides component normally serves as an intro for apps, and below is an image of its common usage:

List Component

Lists are one of the components you will also regularly use in your Ionic apps. Take a look at the screenshot below for an example.

Adding Components to Your Project

Now that we've gathered a bit of info on Ionic Components, let's try and put a few of these 'building blocks' together. Let’s go ahead and add some components into our Ionic project.

We will be using the project we created in the previous tutorial, and since home is our app's entry point, we will add slides to the home.html file to add our slides. We will do so by navigating to the home.html file in src/pages/home and make the following changes to the file:

<ion-header>
  <ion-navbar>
    <ion-title>Welcome</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <!-- Start Ionic Slides Component -->
  <ion-slides pager>

    <ion-slide style="background-color: green">
      <h2>Welcome to Hello World</h2>
      <p>Do some reading here and swipe left</p>
    </ion-slide>
  
    <ion-slide style="background-color: blue">
      <h2>Ionic World</h2>
      <p>Some more reading here and swipe left</p>
      <p>Swipping right works too :)</p>
    </ion-slide>
  
    <ion-slide style="background-color: red">
      <h2>Finish</h2>
      <p>You can't swipe all day. See more of my app</p>
      <button ion-button (click)="navigateToMyList()">Show me more!</button>
    </ion-slide>
    
  </ion-slides>
  <!-- End Ionic Slides Component -->
</ion-content>

As you can see above, here we've added three slides using the slides component. This is inside <ion-slide>Content here...</ion-slide>. You can generate as many slides as you want, but for the purpose of this example, we've only created three.

We'll use another Ionic component: the list component. In order to do so, let's go ahead and generate a new page titled my-list. You should remember how to generate a new page from the previous tutorial using the following command: ionic generate page my-list.

With our newly created page added into our app, lets go ahead and navigate to my-list.html and edit the file as follows:

<ion-header>

  <ion-navbar>
    <ion-title>My List</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <!-- Start Ionic List Component -->
    <ion-list>
      <ion-item>1</ion-item>
      <ion-item>2</ion-item>
      <ion-item>3</ion-item>
    </ion-list>
    <!-- End Ionic List Component -->
</ion-content>

With the aboe code above added in your app, you should be able to see a list with 3 items.  Now that is fine, but I'm sure you'd like to see some smooth scrolling with acceleration and deceleration when you scroll through the list, right? Well, that's easy to achieve—we just need a larger list!

Consider the following code inside the my-list.html file:

<ion-header>

  <ion-navbar>
    <ion-title>My List</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <!-- Start Ionic List Component -->
    <ion-list>
      <ion-item>1</ion-item>
      <ion-item>2</ion-item>
      <ion-item>3</ion-item>
      <ion-item>4</ion-item>
      <ion-item>5</ion-item>
      <ion-item>6</ion-item>
      <ion-item>7</ion-item>
      <ion-item>8</ion-item>
      <ion-item>9</ion-item>
      <ion-item>10</ion-item>
      <ion-item>11</ion-item>
      <ion-item>12</ion-item>
      <ion-item>13</ion-item>
      <ion-item>14</ion-item>
      <ion-item>15</ion-item>
      <ion-item>16</ion-item>
      <ion-item>17</ion-item>
      <ion-item>18</ion-item>
      <ion-item>19</ion-item>
      <ion-item>20</ion-item>
    </ion-list>
    <!-- End Ionic List Component -->
</ion-content>

If you update your file with the longer list above, you will see scrolling with acceleration and deceleration. 

Now this is one way of creating a list in our project, but it'll seem pretty annoying if we'll need to create a list with even more items. That would mean writing <ion-item>...content...</ion-item> for each one. Luckily, there is a better way, and even as a beginner, you should try following this same method when working with large sums of data and information. 

The official Ionic docs shows how to use a different approach for populating a list with items:

<ion-header>

  <ion-navbar>
    <ion-title>My List</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <!-- Start Ionic List Component -->
    <ion-list>
        <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
        {{ item }}
        </button>  
    </ion-list>
    <!-- End Ionic List Component -->
</ion-content>

The magic in the code above is the use of the Angular directive: *ngFor. We won't be diving deeper in to what this directive is and what it does, but in short it iterates over a collection of data, allowing us to build data presentation lists and tables in our app. items is a variable that contains our data and item is filled in with each item in that list. If you feel the need to want to learn more about this directive, please take a look at the official Angular documentation.

With that knowledge, let's improve our project with the *ngFor directive. Edit the my-list.html file to reflect the following:

<ion-header>

  <ion-navbar>
    <ion-title>My List</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <!-- Start Ionic List Component -->
    <ion-list>
      <ion-item *ngFor="let item of items">
        <ion-avatar item-start>
          <img src="{{item.image}}">
        </ion-avatar>
        <h2>{{item.title}}</h2>
        <p>{{item.subTitle}}</p>
      </ion-item>
    </ion-list>
    <!-- End Ionic List Component -->
</ion-content>

A lot of things are happening here. The <ion-list> contains a series of <ion-avatar> components. The item-start attribute means that the avatar will be aligned to the right-hand side. Each list item also contains a header tag (<h2>) and a paragraph tag (<p>).

So basically you can also add additional components inside the list component. Have a look at another great example of how to achieve this in the List In Cards example from the Ionic docs. Again, implementing *ngFor in that example will be of benefit.

Now, back to our code, our item in items contains title, subTitle and image. Let's go ahead and make the following changing inside our my-list.ts file:

export class MyListPage {
  items: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.items = [
      {
        title: 'Item 1', 
        subTitle: 'Sub title 1', 
        image: 'https://placehold.it/50'
      },
      {
        title: 'Item 2', 
        subTitle: 'Sub title 2', 
        image: 'https://placehold.it/50'
      },
      {
        title: 'Item 3', 
        subTitle: 'Sub title 3', 
        image: 'https://placehold.it/50'
      },
      {
        title: 'Item 4', 
        subTitle: 'Sub title 4', 
        image: 'https://placehold.it/50'
      },
      {
        title: 'item 5', 
        subTitle: 'Sub title 5', 
        image: 'https://placehold.it/50'
      },
      title: 'item 6', 
        subTitle: 'Sub title 6', 
        image: 'https://placehold.it/50'
      },
      title: 'item 7', 
        subTitle: 'Sub title 7', 
        image: 'https://placehold.it/50'
      },
      title: 'item 8', 
        subTitle: 'Sub title 8', 
        image: 'https://placehold.it/50'
      },
      title: 'item 9', 
        subTitle: 'Sub title 9', 
        image: 'https://placehold.it/50'
      },
      title: 'item 10', 
        subTitle: 'Sub title 10', 
        image: 'https://placehold.it/50'
      }]
    }

In the example above, we are populating our items inside our constructor file, my-list.ts. These will be displayed inside our page template, the my-list.html file. This data can come from any source: a local database, user input, or an external REST API. But for the sake of this example, we are just hard coding the data.

Conclusion

Although we didn't cover all of the Ionic Components, the same principals apply to the the others. I would like to encourage you to play around and test the rest of the components and start getting familiar with using them. Because, as mentioned right in the beginning, these components are going to be the building blocks of every Ionic application you'll ever build!

In the mean time, check out some of our other posts on Ionic app development.

• 
  App Templates
  
  
  15 Best Ionic App Templates
  
  
  Ashraff Hathibelagal


• 
  Ionic
  
  
  Get Started With Ionic Services: Push
  
  
  Wern Ancheta


• 
  Angular
  
  
  Creating a Task Manager App Using Ionic: Part 1
  
  
  Roy Agasthyan


• 
  Ionic
  
  
  New Course: Easy Mobile Apps With Ionic Creator
  
  
  Andrew Blackman