Tutorial hero
Lesson icon

Custom Components in Ionic 2

Originally published January 13, 2017 Time 2 mins

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

Learn to build modern Angular apps with my course