What is Angular - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a standalone Angular component.

Angular

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

@Component({
  selector: 'app-hello',
  template: `<h1>Hello, Angular!</h1>`,
  standalone: [1]
})
export class HelloComponent {}

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using false or null instead of true for standalone.

Omitting the standalone property.

The standalone: true flag makes the component standalone in Angular 17+.

2fill in blank

medium

Complete the code to inject a signal in an Angular standalone component.

Angular

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

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

  increment() {
    this.count[1](c => c + 1);
  }
}

Drag options to blanks, or click blank then click option'

Aupdate

Bset

Creset

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using set which replaces the value instead of updating.

Using get which only reads the value.

The update method changes the signal value based on the current value.

3fill in blank

hard

Fix the error in the Angular component template binding.

Angular

<button (click)="[1]()">Click me</button>

Drag options to blanks, or click blank then click option'

AincrementClick

Bincrement()

Cincrement

DincrementClick()

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses inside the quotes causing syntax errors.

Using wrong method names.

In Angular templates, event bindings use method names without parentheses inside the quotes.

4fill in blank

hard

Fill both blanks to create a signal and read its value in Angular.

Angular

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

const count = [1](0);
console.log(count[2]());

Drag options to blanks, or click blank then click option'

Asignal

Bupdate

C()

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using update instead of get to read the value.

Calling signal without parentheses.

Create a signal with signal(0) and read its value with get().

5fill in blank

hard

Fill all three blanks to define a standalone Angular component with a signal and a button to increment it.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-clicker',
  template: `<button (click)="[2]()">Clicked {{ count() }} times</button>`,
  standalone: true
})
export class ClickerComponent {
  count = [3](0);

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

Drag options to blanks, or click blank then click option'

Asignal

Bincrement

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing signal from Angular core.

Using wrong method name in template.

Not creating count as a signal.

Import signal, use increment as the click handler, and create count as a signal.

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