Why components are the building blocks in Angular - Test Your Understanding

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

Setting standalone to false or omitting it causes the component to require NgModules.

Using null or undefined is invalid for standalone.

The standalone property must be set to true to make the component standalone in Angular 17+.

2fill in blank

medium

Complete the code to inject a service into a standalone component.

Angular

import { Component, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  template: `<p>{{ data }}</p>`,
  standalone: true
})
export class DataComponent {
  dataService = [1](DataService);
  data = this.dataService.getData();
}

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

Anew

Binject

CuseService

Dprovide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'new' to create service instances bypasses Angular's DI system.

Using non-existent functions like 'useService' or 'provide' here.

In Angular 17+, the inject() function is used to get a service instance inside standalone components.

3fill in blank

hard

Fix the error in the component template binding.

Angular

<template>
  <h2>[1]</h2>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const title = ref('Welcome to Angular');
</script>

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

Atitle.value

Btitle()

Cthis.title

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using Vue.js reactive syntax in Angular templates.

Trying to access '.value' on properties in Angular.

In Angular templates, you bind directly to the property name without '.value' or function calls. The code is mixing Vue syntax; in Angular, use just {{ title }}.

4fill in blank

hard

Fill both blanks to create a component with a signal and display its value.

Angular

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

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

  increment() {
    this.count([2] + 1);
  }
}

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

Asignal

Bthis.count()

Ccount

Dsignal()

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign to the signal directly instead of calling it.

Using 'count' without 'this' inside the method.

The signal function creates a reactive value. To update it, call this.count() with the new value.

5fill in blank

hard

Fill all three blanks to create a component that uses a signal and a computed signal.

Angular

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

@Component({
  selector: 'app-greeting',
  template: `<p>{{ greeting() }}</p>`,
  standalone: true
})
export class GreetingComponent {
  name = [1]('Alice');
  greeting = [2](() => `Hello, ${this.name()}`);

  changeName(newName: string) {
    this.name([3]);
  }
}

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

Asignal

Bcomputed

CnewName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' instead of 'newName' when updating the signal.

Not using computed for derived reactive values.

Use signal to create reactive state, computed to create derived state, and update the signal by calling it with the new value.

Practice

1. Why are components considered the building blocks in Angular applications?

easy

A. Because they split the app into small, manageable pieces with their own HTML, CSS, and logic.

B. Because they replace the need for services and modules entirely.

C. Because they only contain CSS styles for the app.

D. Because they are used only for routing between pages.

Solution

1. Step 1: Understand the role of components

   Components divide the app into smaller parts, each with its own structure and behavior.

2. Step 2: Recognize what components contain

   Each component has its own HTML, CSS, and logic, making the app easier to build and maintain.

3. Final Answer:

   Because they split the app into small, manageable pieces with their own HTML, CSS, and logic. -> Option A

4. Quick Check:

   Components = small parts with own code [OK]

Hint: Components bundle HTML, CSS, and logic into small parts [OK]

Common Mistakes:

• Thinking components only hold styles
• Confusing components with services
• Believing components handle routing only

2. Which of the following is the correct way to define a basic Angular component?

easy

A. function SampleComponent() { selector: 'app-sample' }

B. @Component({ selector: 'app-sample', templateUrl: './sample.html' }) export class SampleComponent {}

C. @Component({ selector: 'app-sample' }) function SampleComponent() {}

D. class SampleComponent { selector = 'app-sample' }

Solution

1. Step 1: Identify Angular component syntax

   Angular components use the @Component decorator with metadata like selector and templateUrl.

2. Step 2: Check the class declaration

   The component must be a class exported with the decorator above it.

3. Final Answer:

   @Component({ selector: 'app-sample', templateUrl: './sample.html' }) export class SampleComponent {} -> Option B

4. Quick Check:

   @Component decorator + class = correct syntax [OK]

Hint: Look for @Component decorator above an exported class [OK]

Common Mistakes:

• Using function instead of class for components
• Missing @Component decorator
• Placing selector inside class body without decorator

3. Given this Angular component template:

<h1>{{title}}</h1>
<p>Welcome to {{appName}}!</p>

and this component class:

export class WelcomeComponent {
  title = 'Hello';
  appName = 'MyApp';
}

What will be the rendered output in the browser?

medium

A. HelloWelcome to {{appName}}!

B. {{title}}Welcome to {{appName}}!

C. HelloWelcome to MyApp!

D. {{title}}Welcome to MyApp!

Solution

1. Step 1: Understand Angular interpolation

   Angular replaces {{variable}} with the variable's value from the component class.

2. Step 2: Substitute variables in the template

   title = 'Hello' and appName = 'MyApp', so the template renders with these values.

3. Final Answer:

   <h1>Hello</h1><p>Welcome to MyApp!</p> -> Option C

4. Quick Check:

   Interpolation replaces variables with values [OK]

Hint: Remember {{}} shows variable values in template [OK]

Common Mistakes:

• Thinking {{}} stays as text in output
• Mixing variable names or values
• Ignoring component class properties

4. Identify the error in this Angular component code:

@Component({
  selector: 'app-test',
  template: '<p>Test works!</p>'
})
export class TestComponent {
  title = 'Test';
  constructor() {
    this.title = 123;
  }
}

medium

A. Assigning a number to a string property 'title' causes a type error.

B. Missing @Injectable decorator on the class.

C. Template string should use backticks instead of single quotes.

D. Selector name 'app-test' is invalid.

Solution

1. Step 1: Check property type consistency

   title is initialized as a string 'Test', but later assigned a number 123, which is a type mismatch.

2. Step 2: Verify other parts for errors

   @Injectable is not required for components, template string with single quotes is valid, and selector 'app-test' is valid.

3. Final Answer:

   Assigning a number to a string property 'title' causes a type error. -> Option A

4. Quick Check:

   Property type mismatch = error [OK]

Hint: Check if property types stay consistent in constructor [OK]

Common Mistakes:

• Thinking @Injectable is needed for components
• Believing template string quotes cause error
• Assuming selector names must be different

5. You want to build a dashboard app with multiple sections like header, sidebar, and content. Why should you use components for each section instead of writing all HTML and logic in one file?

hard

A. Because writing all code in one file is faster and recommended for large apps.

B. Because Angular requires every section to be a separate component by default.

C. Because components automatically improve app speed without any extra work.

D. Because components let you reuse, maintain, and test each section separately, making the app easier to manage.

Solution

1. Step 1: Understand component benefits

   Components break the app into smaller parts that can be reused, tested, and maintained independently.

2. Step 2: Compare with single-file approach

   Writing all code in one file makes it hard to manage, debug, and update as the app grows.

3. Final Answer:

   Because components let you reuse, maintain, and test each section separately, making the app easier to manage. -> Option D

4. Quick Check:

   Components improve manageability and reuse [OK]

Hint: Use components to split and manage app parts easily [OK]

Common Mistakes:

• Thinking Angular forces components for every section
• Believing components alone boost speed automatically
• Assuming one big file is better for large apps