Why Angular for enterprise applications - 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>`,
  [1]: true
})
export class HelloComponent {}

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

Aimports

Bstandalone

Cproviders

Dstyles

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'imports' instead of 'standalone' for standalone component

Forgetting to set the property to true

The standalone property makes the component standalone, which is recommended in Angular 17+ for enterprise apps.

2fill in blank

medium

Complete the code to inject a service using Angular's new inject() function.

Angular

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

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

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

AuseService

Bnew

Cinject

Dprovide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'new' keyword to create service instance

Trying to use 'provide' instead of 'inject'

The inject() function is the modern way to get services in Angular 17+ standalone components.

3fill in blank

hard

Fix the error in the Angular template syntax for conditional rendering.

Angular

<div *[1]="showContent">
  <p>Content is visible</p>
</div>

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

Aif

Bshow

Cvisible

DngIf

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*if' instead of '*ngIf'

Using '*show' which is not a directive

The correct Angular directive for conditional rendering is *ngIf.

4fill in blank

hard

Fill both blanks to create a reactive signal and update it on button click.

Angular

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <button (click)="[1]()">Increment</button>
  `,
  standalone: true
})
export class CounterComponent {
  count = signal(0);
  [2]() {
    this.count.update(c => c + 1);
  }
}

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

Aincrement

Bcount

Cupdate

DincrementCount

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatch between method name and button click handler

Using 'count' as method name which conflicts with signal

The method to update the signal is named incrementCount, and the button calls increment() which should match the method name. Here, the button calls increment() but the method is incrementCount(), so the blanks fix this mismatch.

5fill in blank

hard

Fill all three blanks to create a standalone Angular component with a signal and a button to reset it.

Angular

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

@Component({
  selector: 'app-reset',
  template: `
    <p>Value: {{ [1]() }}</p>
    <button (click)="[2]()">Reset</button>
  `,
  [3]: true
})
export class ResetComponent {
  value = signal(100);
  reset() {
    this.value.set(0);
  }
}

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

Avalue

Breset

Cstandalone

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong signal name in template

Forgetting to mark component as standalone

The template uses the signal value to display, calls the reset method on button click, and the component is marked as standalone.