What is Angular - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary purpose of Angular?

Angular is a popular framework. What is its main use?

A To style web pages using CSS rules

B To build dynamic web applications with reusable components

C To manage databases and server-side logic

D To write backend APIs in Node.js

💡 Hint

Think about what Angular helps you create on the web.

Angular is designed to build dynamic, interactive web apps using components that can be reused.

❓ component_behavior

intermediate

What happens when you update a signal in Angular?

In Angular 17+, signals are used to track state. What occurs when you update a signal's value?

A The signal value updates but components must be manually notified

B Nothing changes until the page is refreshed manually

C All components using that signal automatically update their view

D The application crashes due to state inconsistency

💡 Hint

Signals help Angular know when to update the UI automatically.

Signals notify Angular to re-render components that depend on them when their value changes.

❓ lifecycle

advanced

What is the role of the inject() function in Angular 17+?

Angular 17 introduced the inject() function. What does it do?

A It is used to inject CSS styles dynamically into components

B It replaces the need for services by directly injecting HTML elements

C It automatically injects global variables into the component scope

D It allows retrieving dependencies inside standalone components or functions without constructor injection

💡 Hint

Think about how Angular manages dependencies without classes.

The inject() function lets you get dependencies in standalone components or functions without using constructors.

📝 Syntax

advanced

Which Angular template syntax correctly uses the new control flow directive to conditionally render content?

Angular 17+ introduced new control flow directives. Which option correctly shows conditional rendering using @if?

Angular

<section *ngIf="isVisible">Visible content</section>

A <section @if(isVisible)>Visible content</section>

B <section *ngIf="isVisible">Visible content</section>

C @if (isVisible) { <section>Visible content</section> }

D <section *if="isVisible">Visible content</section>

💡 Hint

Angular 17+ uses @if instead of *ngIf in templates.

The new Angular control flow directive uses @if for conditional rendering, replacing *ngIf.

🔧 Debug

expert

Why does this Angular standalone component fail to render?

Consider this Angular standalone component code snippet:

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: ``
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count += 1;
  }
}

Why does clicking the button not update the displayed count?

A Because signals are functions; incrementing with '+=' does not update the signal value correctly

B Because the signal should be declared as a regular number, not using signal()

C Because the template syntax for event binding is incorrect

D Because the component is missing the imports array in the decorator

💡 Hint

Remember how to update signals properly in Angular.

Signals are functions. To update their value, you must call this.count.set(this.count() + 1) instead of using '+='.

Practice

1. What is Angular primarily used for?

easy

A. Writing server-side scripts exclusively

B. Designing database schemas

C. Creating desktop software only

D. Building web applications with reusable parts

Solution

1. Step 1: Understand Angular's purpose

   Angular is a framework designed to help build web applications efficiently.

2. Step 2: Identify the correct use case

   It uses components and rules to create interactive web pages, not databases or desktop apps.

3. Final Answer:

   Building web applications with reusable parts -> Option D

4. Quick Check:

   Angular = Web app builder [OK]

Hint: Angular is for web apps, not databases or desktop [OK]

Common Mistakes:

• Confusing Angular with database tools
• Thinking Angular is only for desktop apps
• Assuming Angular is server-side only

2. Which of the following is the correct way to define a standalone component in Angular 17+?

easy

A. @Component({ standalone: true, selector: 'app-sample', template: 'Hello' }) export class SampleComponent {}

B. @NgModule({ declarations: [SampleComponent] }) export class SampleModule {}

C. function SampleComponent() { return 'Hello'; }

D. class SampleComponent extends Component {}

Solution

1. Step 1: Recall Angular 17+ standalone component syntax

   Standalone components use @Component with 'standalone: true' and define selector and template.

2. Step 2: Check each option

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

   Hello

   ' }) export class SampleComponent {} matches the correct syntax; A is plain function, B is for modules, D is invalid class extension.

3. Final Answer:

   @Component({ standalone: true, selector: 'app-sample', template: '<p>Hello</p>' }) export class SampleComponent {} -> Option A

4. Quick Check:

   Standalone component = @Component with standalone: true [OK]

Hint: Standalone components need 'standalone: true' in @Component [OK]

Common Mistakes:

• Using @NgModule instead of standalone component
• Defining component as plain function
• Extending non-existent Component class

3. Given this Angular component code snippet, what will be displayed?

@Component({ standalone: true, selector: 'app-counter', template: `<button (click)='count = count + 1'>Increment</button><p>Count: {{count}}</p>` }) export class CounterComponent { count = 0; }

medium

A. Syntax error due to missing imports

B. A button labeled 'Increment' but the count never changes

C. A button labeled 'Increment' and a paragraph showing 'Count: 0' initially, increasing on clicks

D. Nothing is displayed because count is not initialized

Solution

1. Step 1: Analyze component behavior

   The component has a count variable starting at 0 and a button that increments count on click.

2. Step 2: Understand template binding

   The template shows the count value and updates it when the button is clicked.

3. Final Answer:

   A button labeled 'Increment' and a paragraph showing 'Count: 0' initially, increasing on clicks -> Option C

4. Quick Check:

   Button click updates count = A [OK]

Hint: Click updates count variable shown in template [OK]

Common Mistakes:

• Assuming count does not update without explicit change detection
• Thinking missing imports cause syntax error here
• Believing count is undefined initially

4. Identify the error in this Angular component code:

@Component({ selector: 'app-test', template: '<p>Test</p>' }) export class TestComponent { count = 0; increment() { this.count++; } }

And this template:

<button (click)='increment'>Add</button><p>Count: {{count}}</p>

medium

A. The click event should call increment() with parentheses

B. The count variable is not initialized

C. The selector is missing standalone: true

D. Template syntax is invalid for interpolation

Solution

1. Step 1: Check event binding syntax

   The template uses (click)='increment' but should call the method with parentheses: (click)='increment()'.

2. Step 2: Verify other parts

   Count is initialized, selector is valid without standalone, and interpolation syntax is correct.

3. Final Answer:

   The click event should call increment() with parentheses -> Option A

4. Quick Check:

   Event binding needs method call syntax [OK]

Hint: Use parentheses to call methods in event bindings [OK]

Common Mistakes:

• Omitting parentheses in event handler calls
• Thinking count needs explicit initialization
• Confusing standalone component requirement

5. You want to create an Angular component that shows a list of items and highlights the selected item. Which approach best uses Angular's core concepts?

hard

A. Use a global variable outside Angular and update the DOM manually with JavaScript

B. Use a standalone component with a signal to track selected item and a template with a loop and conditional class binding

C. Create multiple components for each item without sharing state

D. Use only CSS to highlight items without any Angular logic

Solution

1. Step 1: Identify Angular best practices

   Angular encourages using standalone components, signals for reactive state, and template directives like loops and conditional classes.

2. Step 2: Evaluate options

   Use a standalone component with a signal to track selected item and a template with a loop and conditional class binding uses Angular features properly; A bypasses Angular, C lacks shared state, D ignores logic needed for selection.

3. Final Answer:

   Use a standalone component with a signal to track selected item and a template with a loop and conditional class binding -> Option B

4. Quick Check:

   Angular reactive state + template logic = Use a standalone component with a signal to track selected item and a template with a loop and conditional class binding [OK]

Hint: Use signals and template loops for interactive lists [OK]

Common Mistakes:

• Manipulating DOM outside Angular
• Not sharing state between items
• Relying only on CSS without logic