Gain insights into Angular’s built-in directives and pipes, and delve into creating custom ones. Learn about their real-world applications to boost your project's performance and code readability.

angular.tar.gz

angular

angular-fa

Directives and pipes are incredible and often undervalued features of the Angular framework. They allow us to write efficient code, improve application performance, and omit code duplications.

In this course, you will learn about the theory and the working mechanisms of built-in directives and pipes in Angular. You’ll also implement some custom directives and pipes to learn about their real-world application cases. With this course, you will improve your Angular skills and refine your project’s codebase to increase the performance and readability of your code.

Directives and Pipes in Angular

## Objectives

Our task is to extend our avatar directive with the following features:
- The image should be slightly scaled up when the mouse cursor, or pointer, hovers over it.
- The image scale should be reset when the pointer is removed from the image.
- An event should be emitted each time the pointer is placed on or removed from an image.
- A component that uses the directive should receive information when zooming in or out on an image. It should also log `image zoom in` and `image zoom out` into the console accordingly.


## Task
Please write the code below:

# Objectives

Our task is to extend our avatar directive with the following features:
- The image should be slightly scaled up when the mouse cursor, or pointer, hovers over it.
- The image scale should be reset when the pointer is removed from the image.
- An event should be emitted each time the pointer is placed on or removed from an image.
- A component that uses the directive should receive information when zooming in or out on an image. It should also log `image zoom in` and `image zoom out` into the console accordingly.


# Task
Please write the code below:

Let’s practice handing events in directives.


Exercise: Handle Events with a Custom Attribute Directive


Let’s practice handing events in directives.

Getting Started

Directives

Test: Built-in Directives

Attribute Directives

Test: Attribute Directives

Structural Directives

Test: Structural Directives

Advanced Techniques Using Directives

Test: Advanced Directives

Directives Summary

Pipes

Test: Pipes

Pipes summary

Exercise: Handle Events with a Custom Attribute Directive

Objectives

Task