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
In this task, we’ll display users like we did in the [previous lesson](https://www.educative.io/courses/directives-pipes-angular/solution-the-built-in-ngif-directive) using `NgIf`. However, this time the users will be stored in the array. We need  to display the users in the form of a list while meeting these requirements:
1. The users have to be displayed using the `NgFor` directive.
2. The user should be able to highlight any list item by clicking it.
3. The users should be displayed in a clear way. The odd and even rows of data should have different backgrounds, for example, `light-grey` and `dark-grey` colors.
4. We should use the `trackBy` function to improve the performance of the `NgFor` directive.


## Task
Please write the code below:

# Objectives
In this task, we’ll display users like we did in the [previous lesson](https://www.educative.io/courses/directives-pipes-angular/solution-the-built-in-ngif-directive) using `NgIf`. However, this time the users will be stored in the array. We need  to display the users in the form of a list while meeting these requirements:
1. The users have to be displayed using the `NgFor` directive.
2. The user should be able to highlight any list item by clicking it.
3. The users should be displayed in a clear way. The odd and even rows of data should have different backgrounds, for example, `light-grey` and `dark-grey` colors.
4. We should use the `trackBy` function to improve the performance of the `NgFor` directive.


# Task
Please write the code below:

Let’s practice working with the `NgFor` directive.

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: The Built-in `NgFor` Directive

Objectives

Task