Introduction

Most of Ionic's out-of-the-box features are actually prebuilt components. In this section, you will learn how to create your own custom component using the html template, which contains Ionic components as well.

Components actually define Angular 2. A component is no more than just a class with self-describing features. For example, <ul> is a component that you are already familiar with. Previously, you used various Ionic components, such as <ion-list> and <ion-item>. A component is a decorator (that is, @Component) to add metadata to a class to describe the following:

• selector: This is the name that is to be used in the DOM (for example, <my-component>)
• template or templateUrl: This refers to the way the component is rendered
• directives: This refers to a list of directive dependencies you plan to use inside the component
• providers: This is a list of providers (that is, services) you plan to use inside the component

Of course, there are many other options...