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 '+='.