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

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why are Angular components considered building blocks?

In Angular, components are often called the building blocks of an application. Why is this analogy used?

A Because components are only used to write backend logic in Angular.

B Because components are only used for styling and do not contain any logic.

C Because components replace the need for services and modules entirely.

D Because components encapsulate UI, logic, and styles, making them reusable and composable units.

💡 Hint

Think about what parts of an app a component controls and how it helps build the UI.

Angular components combine the user interface, behavior, and styles into one reusable piece. This makes them like building blocks that you can assemble to create complex apps.

❓ component_behavior

intermediate

What happens when you nest Angular components?

Consider two Angular components: ParentComponent and ChildComponent. If ChildComponent is used inside ParentComponent's template, what is the result?

Angular

<!-- ParentComponent template -->
<app-child></app-child>

A The parent component's template is replaced by the child component's styles only.

B The child component replaces the parent component entirely in the UI.

C The child component's template and logic render inside the parent component's view.

D The child component's code is ignored and not rendered.

💡 Hint

Think about how components combine to build the UI.

Nesting components means the child component's UI and behavior appear inside the parent component's view, allowing modular and organized UI building.

❓ lifecycle

advanced

When is the ngOnInit lifecycle hook called in Angular components?

In Angular, the ngOnInit method is part of the component lifecycle. When exactly is it called?

A Right after Angular first displays the data-bound properties and sets up the component.

B Before the component's constructor is called.

C Only when the component is destroyed.

D After the component's view has been destroyed.

💡 Hint

Think about when initialization logic should run in a component.

ngOnInit runs once after Angular sets up the component's input properties, making it the right place for initialization logic.

❓ state_output

advanced

What is the output of this Angular component with state changes?

Given this Angular component code, what will be displayed after the button is clicked twice?

Angular

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

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

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

A Count: 0

B Count: 2

C Count: 1

D Count: undefined

💡 Hint

Each click increases the count by 1.

The count signal starts at 0 and increments by 1 each click. After two clicks, it becomes 2.

📝 Syntax

expert

Which option correctly defines a standalone Angular component?

Select the code snippet that correctly defines a standalone Angular component using Angular 17+ syntax.

A

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

@Component({
  selector: 'app-sample',
  standalone: true,
  template: `<p>Sample works!</p>`
})
export class SampleComponent {}

B

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

@Component({
  selector: 'app-sample',
  standalone: false,
  template: `<p>Sample works!</p>`
})
export class SampleComponent {}

C

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

@Component({
  selector: 'app-sample',
  template: `<p>Sample works!</p>`
})
export class SampleComponent {}

D

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

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

💡 Hint

Standalone components must have standalone: true and a template.

Option A correctly sets standalone: true and includes a template, which is required for standalone components in Angular 17+.