Directive execution and DOM manipulation in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an Angular directive?

An Angular directive is a special marker in the DOM that tells Angular to attach behavior or modify the element. It helps add functionality to HTML elements.

beginner

How does Angular execute a directive?

Angular runs directives during the component rendering process. It looks for directive selectors in the DOM and runs their logic to update or manipulate elements.

intermediate

Which Angular lifecycle hook is best for DOM manipulation inside a directive?

The ngAfterViewInit lifecycle hook is best for DOM manipulation because it runs after Angular has fully initialized the component's view.

intermediate

Why should direct DOM manipulation be done carefully in Angular directives?

Direct DOM manipulation can cause issues with Angular's rendering and change detection. It's best to use Angular's Renderer2 service to safely manipulate the DOM.

intermediate

What is Renderer2 in Angular and why use it in directives?

Renderer2 is a service that provides safe methods to manipulate the DOM. It helps keep your app compatible with different platforms and avoids direct DOM access.

When does Angular execute a directive's logic?

A Only when the page reloads

B During component rendering when the directive selector matches

C Before the component is created

D Only after the user clicks a button

Angular runs directive logic during component rendering when it finds matching selectors in the DOM.

Which lifecycle hook is ideal for DOM manipulation in a directive?

A ngAfterViewInit

B ngOnInit

C ngOnDestroy

D ngDoCheck

ngAfterViewInit runs after the component's view has been fully initialized, making it safe for DOM manipulation.

Why use Renderer2 instead of direct DOM access in Angular directives?

A It only works in browsers

B It makes the app slower

C It disables change detection

D It ensures safe and platform-independent DOM manipulation

Renderer2 provides safe methods to manipulate the DOM and keeps the app compatible across platforms.

What happens if you manipulate the DOM directly in Angular without Renderer2?

A Angular automatically fixes it

B It improves performance

C It can cause rendering and change detection issues

D It disables directives

Direct DOM manipulation can interfere with Angular's rendering and change detection, causing bugs.

Which of these is NOT a type of Angular directive?

A Event directive

B Structural directive

C Attribute directive

D Component directive

Angular has component, structural, and attribute directives. 'Event directive' is not a type.

Explain how Angular executes directives and how you can safely manipulate the DOM inside a directive.

Think about Angular's rendering process and lifecycle hooks.

Describe why direct DOM manipulation can be problematic in Angular and how Renderer2 helps.

Consider Angular's rendering and platform support.