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

# An `NgClass` with a string expression

Now, let's get ready for a quick task.
## Objectives
In this task, we’ll improve a button component from the previous lesson. 

There are four classes that can be applied to a button:


- The `app-button` class can be used for default styles of any button.
- The `warn-button` class styles buttons in red.
- The `primary-button` class styles buttons to use primary design colors.
- The `secondary-button` class styles buttons to use secondary design colors.

The button itself has two input properties:


- The color input can take one of two options, `primary` or `secondary.`
- The warn input can be either `true` or `false`.

Our task is to apply these CSS classes to the button so that it works like this:


1. The button should always have the `app-button` class on.
2. The button should be red when the `warn` property is `true`.
3. The button should match a primary design `color` theme by default and pass `primary` to the color property.
4. The button should match the secondary design color if `secondary` is passed to the `color` property.

## Task
Please write the code below:

Let's practice working with `NgClass` 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 `NgClass` Directive

An `NgClass` with a string expression

Objectives