Custom Components in Ionic 2

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