Working with Angular Directives and Built-In Control Flow

In this chapter, you’ll learn about Angular directives in depth, with a real-world example of using a directive that highlights text on searching. You’ll also write your first structural directive and see how the ViewContainer and TemplateRef services work together to add/remove elements from the Document Object Model (DOM), just as in the case of *ngIf. You’ll also create some really cool attribute directives that do different tasks. Finally, you’ll learn how to use the Directive Composition API to apply multiple directives to the same element.

Here are the recipes we’re going to cover in this chapter:

• Using attribute directives to handle the appearance of elements
• Creating a directive to calculate the read time for articles
• Creating a directive that allows you to vertically scroll to an element
• Writing your first custom structural directive
• How to apply multiple structural directives to the same element
• Applying multiple directives to the same element using the Directive Composition API