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

Let's do some coding! 

# Objectives
For this task, let’s imagine a component with three range pickers using standard HTML input components. The pickers allow us to choose a value from `0` to `255`. Each picker represents a single color value in the RGB system. So, the first picker selects a value for `red`, the second one for `green`, and the last one for `blue`.

These are the requirements for this task:


1. Next to each input, there’s an empty div element. Make the background color represent the selected color on that picker. So, if the selected value is `0`, then the button should be `black`, and when it’s 255, it should be `red`. Any value in between should match that RGB value, for instance:
    1. Value = `100`, results in `rgb (100,0,0)`
    1. Value = `200`, results in `rgb (200,0,0)`

2. Underneath all inputs, there is an empty `div`. Please set its background to a color value based on all three properties. 

# Task
Please write the code below:

Let's Practice working with an `NgStyle` directive.

Getting Started

Directives

Test: Built-in Directives

Attribute Directives

Test: Attribute Directives

Structural Directives

Test: Structural Directives

Create Your First Data Pipeline with a Dashboard

Advanced Techniques Using Directives

Test: Advanced Directives

Directives Summary

Pipes

Test: Pipes

Pipes summary

Build an E-book Reader in Angular With Gutendex API

Exercise: The Built-in `NgStyle` Directive

Objectives