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.

Practice

1. Which statement best describes Angular compared to React and Vue?

easy

A. Angular is a full framework with built-in features and uses TypeScript.

B. Angular is a lightweight UI library focusing only on the view layer.

C. Angular uses JSX syntax for templating like React.

D. Angular is a progressive framework with simple single-file components.

Solution

1. Step 1: Understand Angular's scope

   Angular is a complete framework that includes routing, forms, HTTP, and more, unlike React which is mainly a UI library.

2. Step 2: Compare Angular's language and syntax

   Angular uses TypeScript and decorators, while React uses JavaScript and JSX, and Vue uses simpler syntax with single-file components.

3. Final Answer:

   Angular is a full framework with built-in features and uses TypeScript. -> Option A

4. Quick Check:

   Angular = full framework + TypeScript [OK]

Hint: Angular = full framework + TypeScript, React = UI library [OK]

Common Mistakes:

• Confusing Angular as just a UI library like React
• Thinking Angular uses JSX syntax
• Assuming Angular uses single-file components like Vue

2. Which syntax is correct for defining a component in Angular?

easy

A. const AppComponent = { template: 'Hello' }

B. function AppComponent() { return <div>Hello</div>; }

C. @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { }

D. Vue.component('app-root', { template: 'Hello' })

Solution

1. Step 1: Identify Angular component syntax

   Angular components use the @Component decorator with metadata and a TypeScript class.

2. Step 2: Compare with other frameworks

   React uses functions returning JSX, Vue uses objects or Vue.component, so options A, B, D are not Angular syntax.

3. Final Answer:

   @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { } -> Option C

4. Quick Check:

   Angular uses @Component decorator [OK]

Hint: Angular components use @Component decorator and class [OK]

Common Mistakes:

• Using React function syntax for Angular components
• Using Vue component registration syntax in Angular
• Omitting the @Component decorator in Angular

3. Given this Angular code snippet, what will be the rendered output?

@Component({ selector: 'app-msg', template: `
{{ message }}
` }) export class MsgComponent { message = 'Hello Angular'; }

medium

A. Hello Angular

B. {{ message }}

C. Error: message is undefined

D. Hello React

Solution

1. Step 1: Understand Angular interpolation

   The template uses {{ message }} which Angular replaces with the component's message property value.

2. Step 2: Check the message property value

   The message property is set to 'Hello Angular', so the rendered output is a paragraph with that text.

3. Final Answer:

   <p>Hello Angular</p> -> Option A

4. Quick Check:

   Angular interpolation outputs property value [OK]

Hint: {{ }} shows component property value in Angular templates [OK]

Common Mistakes:

• Thinking {{ message }} prints literally
• Assuming message is undefined without initialization
• Confusing Angular interpolation with React JSX

4. Identify the error in this Angular component code:

@Component({ selector: 'app-test', template: `
{{ title }}
` }) export class TestComponent { title: string; }

medium

A. Incorrect selector name format

B. Missing initialization of the 'title' property

C. Template syntax should use square brackets instead of curly braces

D. Class should not be exported

Solution

1. Step 1: Check property declaration

   The title property is declared but not initialized, so it is undefined at runtime.

2. Step 2: Understand Angular template binding

   Angular tries to display {{ title }}, but since title is undefined, it will render empty or cause issues.

3. Final Answer:

   Missing initialization of the 'title' property -> Option B

4. Quick Check:

   Uninitialized property causes undefined display [OK]

Hint: Always initialize component properties before use [OK]

Common Mistakes:

• Thinking selector format is wrong
• Confusing Angular interpolation syntax
• Believing export keyword is disallowed

5. Which feature uniquely distinguishes Angular from React and Vue in large-scale app development?

hard

A. Lightweight virtual DOM for fast rendering

B. Use of JSX syntax for templating UI components

C. Progressive adoption with optional core features

D. Built-in dependency injection system for managing services

Solution

1. Step 1: Identify Angular's unique architecture feature

   Angular includes a built-in dependency injection system to manage services and components efficiently.

2. Step 2: Compare with React and Vue features

   React uses JSX and does not have built-in dependency injection; Vue is progressive and lightweight but lacks Angular's DI system.

3. Final Answer:

   Built-in dependency injection system for managing services -> Option D

4. Quick Check:

   Angular's DI system is unique among these frameworks [OK]

Hint: Angular has built-in dependency injection, React and Vue do not [OK]

Common Mistakes:

• Confusing JSX as Angular feature
• Thinking Vue has built-in DI like Angular
• Assuming virtual DOM is unique to Angular