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

It's time to practice! 

# Objectives

We want to implement a directive that can be applied to change the apprearance of buttons while adhering to the following requirements:

- Create a directive that applies to the `appButton` selector.

- The directive should take one of these two color modes:

    - The `primary` mode should change the background color to blue and the font color to white.

    - The `secondary` mode should change the background color to yellow and the font color to black.

After the directive takes either `primary` or `secondary`, the color mode property should be able to bind using a single attribute with the `appButton`.
`
- The directive should take another value which is the `size` provided in `px`. It should also follow these parameters:
    - By default, the button should have a 120px width.

    - If a value is provided, it should be set as a new width.

# Task
Please write the code below:


Let’s practice passing values to the directive.


Exercise: Passing Values to the Custom Attribute Directive


Let’s practice passing values to the 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: Passing Values to the Custom Attribute Directive

Objectives