Tutorial hero image
Lesson icon

Custom Components in Ionic 2

1 min read

Originally published January 13, 2017

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 others!