8 Building custom directives and pipes
This chapter covers
- How to create your own directives
- The difference between structural and attribute directives
- How to use a directive to modify another component
- How to craft custom pipes
- What pipe purity is and how to design stateful or stateless pipes
Angular ships with a number of directives and pipes for the broadest use cases. Chapter 3 covered the defaults, so you can review what they are and how they’re used. This includes directives such as NgFor and NgIf for iterating over a list or conditionally displaying items, and pipes such as Currency and Number for formatting values for currency or number display.
This chapter focuses on creating custom directives and pipes and talks about why you might create them. The built-in pipes and directives may fill many of the use cases, but sometimes your application requirements will benefit from a custom implementation to make things easier to use.
There are two types of custom directives, which have their own use cases and capabilities. We’ll create one that modifies some attributes of an element, one that modifies the default behaviors of a component, and one that changes the way the elements are added to the page.