Standalone pipes and directives in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean for a pipe or directive to be 'standalone' in Angular?

A standalone pipe or directive in Angular can be used independently without needing to be declared inside an NgModule. It simplifies reuse and reduces boilerplate.

beginner

How do you declare a standalone directive in Angular?

You add the property standalone: true in the directive's decorator, like @Directive({ standalone: true, selector: '[appExample]' }).

intermediate

Can standalone pipes and directives be imported into components directly?

Yes, standalone pipes and directives can be imported directly into a component's imports array, avoiding the need for NgModule imports.

intermediate

What is one benefit of using standalone pipes and directives in Angular projects?

They reduce the complexity of module management, making components more self-contained and easier to maintain or share.

advanced

How does Angular 16+ support standalone pipes and directives?

Angular 16+ fully supports standalone pipes and directives, allowing developers to build applications without NgModules by using the new standalone: true flag.

What property must you add to a directive to make it standalone?

A export: true

B module: standalone

C independent: yes

D standalone: true

The correct property is standalone: true in the directive decorator.

Can standalone pipes be used without importing an NgModule?

A Only if declared in the root module

B Yes, they can be imported directly into components

C No, they always require an NgModule

D Only in Angular versions before 17

Standalone pipes can be imported directly into components without needing an NgModule.

Which Angular version introduced full support for standalone pipes and directives?

A Angular 16+

B Angular 12

C Angular 9

D Angular 15

Angular 16+ introduced full support for standalone pipes and directives.

What is a key advantage of standalone directives?

A They reduce the need for NgModules

B They require more boilerplate code

C They cannot be reused

D They only work in templates

Standalone directives reduce the need for NgModules, simplifying code structure.

How do you use a standalone pipe in a component?

A Use it without any import

B Declare it in the NgModule only

C Import it in the component's imports array

D Register it in the main.ts file

Standalone pipes must be imported in the component's imports array to be used.

Explain what standalone pipes and directives are and how they change Angular development.

Think about how Angular used to require NgModules for these.

Describe the steps to create and use a standalone directive in an Angular component.

Focus on declaration, import, and usage.