Custom Components in Ionic 2

Custom Components in Ionic 2

Follow Josh Morony on

Learn Ionic with Josh ☕

Hey, I hope you enjoy the article.

If you want a weekly update with my newest content, access to the blog's bonus content, or you want to sign up for one of my free beginner or advanced email courses just enter your details here or in the form below.

The Ionic 2 library provides a wide range of default components – likes lists, segments, and cards – that can easily be added to your applications, but sometimes it is useful to build your own custom components.

Building your own custom component isn’t all that different from building a normal page in Ionic 2 (they are just components too), but there are a few important concepts you should understand first.

In this video tutorial, we will walk through a very simple example of building a custom component in Ionic 2.

Here’s the video:

Video Notes

  • A custom component can be generated using the ionic g component MyComponentName command

  • Custom components should be imported into app.module.ts and added to the declarations array

  • An @Input() can be used to pass in data from the host component (like a normal page) to the custom component

  • An @Output() can be used in conjunction with an EventEmitter to create events that can be listened to on a custom component

If you enjoyed this article, feel free to share it with your friends ☝

Check out my latest videos: