HomeCoursesDirectives and Pipes in Angular

AI-powered learning

Save

Directives and Pipes in Angular

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.

5.0

67 Lessons

2 Projects

3h 10min

Join 2.9 million developers at

LEARNING OBJECTIVES

In-depth knowledge about how directives and pipes work and how they are implemented.
Refactor and improvement techniques for common frontend application issues using directives and pipes.
Implement custom Angular directives.
Implement custom Angular pipes.
Angular built-in directives and pipes.

Learning Roadmap

67 Lessons5 Assessments

Getting Started

Get familiar with Angular directives and pipes to enhance your coding skills.

What Is This Course About?

Directives

Look at Angular directives for reusable elements, custom behaviors, and dynamic DOM manipulation.

Introduction To Directives

How Directives Work?

Exercise: Practice with Directives

Solution: Practice with Directives

Angular Built-in Attribute Directives - NgClass

Exercise: The Built-in `NgClass` Directive

Solution: The Built-in `NgClass` Directive

The Built-in `NgStyle` Directive

Exercise: The Built-in `NgStyle` Directive

Solution: The Built-in `NgStyle` Directive

The Built-in `NgModel` Directive

Exercise: The Built-in `NgModel` Directive

Solution: The Built-in `NgModel` Directive

The Built-in `NgIf` Directive

Exercise: The Built-in `NgIf` Directive

Solution: The Built-in `NgIf` Directive

The Built-in `NgFor` Directive

Exercise: The Built-in `NgFor` Directive

Solution: The Built-in `NgFor` Directive

The Built-in `NgSwitch` Directive

Exercise: The Built-in `NgSwitch` Directive

Solution: The Built-in `NgSwitch` Directive

A Useful Trick with `ng-container`

Test: Built-in Directives

Assessment

Attribute Directives

11 Lessons

Examine attribute directives to manipulate and enhance element behavior and styles in Angular.

Test: Attribute Directives

Assessment

Structural Directives

7 Lessons

Grasp the fundamentals of Angular's structural directives for dynamic DOM manipulation and custom user access controls.

Test: Structural Directives

Assessment

Create Your First Data Pipeline with a Dashboard

Project

Premium

Advanced Techniques Using Directives

9 Lessons

Solve problems in handling visibility, reusable components, and multiple elements using Angular directives.

Test: Advanced Directives

Assessment

Directives Summary

Follow the process of leveraging Angular directives to enhance codebases with dynamic, reusable components.

Summary

Pipes

14 Lessons

Build on how Angular pipes transform data, utilize built-in and custom pipes, and combine various pipes for dynamic, efficient data presentation.

Test: Pipes

Assessment

Pipes summary

Learn how to use Angular pipes for efficient data transformation and presentation.

Summary

Build an E-book Reader in Angular With Gutendex API

Project

Premium

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Developed by MAANG Engineers

ABOUT THIS COURSE

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.

ABOUT THE AUTHOR

Maciej Wojcik

Hey, I'm a frontend developer, passionate about good design for both the code and UX/UI side of things. I am mainly involved in Angular, rxjs, TypeScript subjects.

Learn more about Maciej

Trusted by 2.9 million developers working at companies

These are high-quality courses. Trust me the price is worth it for the content quality. Educative came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks

Anthony Walker

@_webarchitect_

Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!

Evan Dunbar

ML Engineer

You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it.

Software Developer

Carlos Matias La Borde

I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site

Souvik Kundu

Front-end Developer

Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content.

Vinay Krishnaiah

Software Developer