In the previous chapters, we built several components that rendered data on screen with the help of input and output properties. We will leverage the knowledge in this chapter to take our components to the next level with the use of directives and pipes. In a nutshell, while pipes give us the opportunity to digest and transform the information we bind in our templates, directives allow us to conduct more ambitious functionalities where we can access the host element properties and also bind our very own custom event listeners and data bindings.

In this chapter, we will:

• Have a comprehensive overview of the built-in directives of Angular
• Discover how we can refine our data output with pipes
• See how we can design and build our own custom pipes and directives
• Leverage built-in objects for manipulating our templates
• Put all the preceding topics and many more into practice to build a fully interactive to-do items table