How Angular differs from React and Vue - Practice Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

Angular's approach to component structure

Which statement best describes how Angular structures components compared to React and Vue?

A Angular uses standalone components with built-in dependency injection, unlike React and Vue which rely on external libraries for DI.

B Angular components do not support templates, unlike React and Vue which use JSX and templates respectively.

C Angular does not support component reuse, unlike React and Vue which encourage it.

D Angular components are always class-based, while React and Vue only use functional components.

💡 Hint

Think about how Angular handles services and dependencies inside components.

Angular has a built-in dependency injection system that works seamlessly with its standalone components. React and Vue do not have built-in DI and often use external libraries for this purpose.

❓ component_behavior

intermediate

Change detection differences

How does Angular's change detection mechanism differ from React's and Vue's?

A Angular requires manual DOM updates, unlike React and Vue which update automatically.

B Angular uses zone.js to detect changes automatically, while React uses a virtual DOM diffing and Vue uses reactive proxies.

C Angular uses a virtual DOM like React, but Vue uses direct DOM manipulation.

D Angular does not detect changes and relies on user events only.

💡 Hint

Consider how Angular tracks asynchronous tasks to update the UI.

Angular uses zone.js to patch async operations and trigger change detection automatically. React uses a virtual DOM to efficiently update the UI, and Vue uses reactive proxies to track data changes.

📝 Syntax

advanced

Angular standalone component syntax

Which Angular component declaration correctly uses the standalone component feature introduced in Angular 17+?

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-sample',
  template: `<p>Hello Angular!</p>`,
  standalone: true,
  imports: []
})
export class SampleComponent {}

A The 'standalone' property should be set to false for standalone components.

B The 'imports' array is required to include CommonModule for standalone components.

C The code is correct and will compile successfully.

D The component must extend a base class to be standalone.

💡 Hint

Standalone components use 'standalone: true' and can have an empty imports array if no dependencies are needed.

Angular 17+ supports standalone components with 'standalone: true'. The imports array can be empty if no other modules are needed. No base class extension is required.

❓ lifecycle

advanced

Angular lifecycle hooks vs React and Vue

Which lifecycle hook is unique to Angular and has no direct equivalent in React or Vue?

A ngOnInit

B ngAfterViewInit

C ngOnDestroy

D ngDoCheck

💡 Hint

This hook allows custom change detection logic in Angular.

ngDoCheck is unique to Angular and allows developers to implement custom change detection logic. React and Vue do not have a direct equivalent hook.

🔧 Debug

expert

Identifying error in Angular signal usage

What error will this Angular 17+ code produce?

import { Component, signal } from '@angular/core';

@Component({
selector: 'app-counter',
standalone: true,
template: `

{{count()}}

`
})
export class CounterComponent {
count = signal(0);
increment() {
this.count += 1;
}
}

A TypeError: this.count is not a number, cannot use '+=' operator on a signal.

B No error, the code runs and increments count correctly.

C SyntaxError due to missing semicolon after signal declaration.

D Runtime error because 'increment' method is not bound to the template.

💡 Hint

Signals are functions, not simple variables.

Signals in Angular are functions. You cannot use '+=' directly on a signal. Instead, you must update the signal value using the 'set' method or by calling the signal as a function.