In this chapter, we will cover the following tasks related to creating custom components, directives, and filters with Angular 2:
- Creating a custom pizza ordering component
- Creating a custom username input directive
- Creating a custom pipe
- Creating a shared service to provide data to multiple pages
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, but the preceding four options are the most common ones.