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
We want to improve the existing cart item component so it displays values in a more user-friendly way. To do that, we have to meet the following requirements:

- The name of the product should be completely in uppercase.
- The description of the product should be completely in lowercase.
- The price of the product should be formatted according to our local currency.
- The date should be formatted to display the day, month, and year only in  `DD/MM/YY` format.

> Note: To meet all these requirements, we must use pipes. We should not format the text by hardcoding it!



## Task
Write down your code below:




# Objectives
We want to improve the existing cart item component so it displays values in a more user-friendly way. To do that, we have to meet the following requirements:

- The name of the product should be completely in uppercase.
- The description of the product should be completely in lowercase.
- The price of the product should be formatted according to our local currency.
- The date should be formatted to display the day, month, and year only in  `DD/MM/YY` format.

> Note: To meet all these requirements, we must use pipes. We should not format the text by hardcoding it!



# Task
Write down your code below:

Let’s practice using Angular’s built-in pipes.

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: Built-in Pipes in Angular

Objectives

Task