Templates & Binding

Preview — 3 of 10 questions

What is an Angular Signal and how does fine-grained reactivity work?

javascript

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

@Component({
  template: `
    <button (click)="increment()">+</button>
    <p>Count: {{ count() }}</p>
    <p>Double: {{ double() }}</p>
  `
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => count() * 2);  // ← What's wrong here?

  constructor() {
    effect(() => {
      console.log('Count changed:', this.count());
    });
  }

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

AThe code is correct as-is

Bsignal() cannot be used with numbers — only with objects

Ceffect() cannot be used in the constructor

Dcomputed(() => count() * 2) is wrong — inside computed() you must read the signal via this.count(): computed(() => this.count() * 2)

What is the difference between constructor injection and inject()?

javascript

// Approach 1: Constructor injection
@Component({ /* ... */ })
export class UserComponent {
  constructor(private userService: UserService) {}
}

// Approach 2: inject() function
@Component({ /* ... */ })
export class UserComponent {
  private userService = inject(UserService);
}

ABoth are functionally equivalent for basic injection. inject() is more modern, works in functions outside classes (guards, interceptors, composables), and is required in class field initializers

Binject() creates a new instance on every call — the constructor reuses existing instances

Cinject() cannot be used in components — only in services

DThe constructor supports a maximum of 3 dependencies

What is the difference between template-driven forms and reactive forms?

javascript

// Reactive Form:
import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';

@Component({
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <input formControlName="email" />
      <input formControlName="password" type="password" />
      <button type="submit" [disabled]="loginForm.invalid">Login</button>
    </form>
  `
})
export class LoginComponent {
  loginForm = inject(FormBuilder).group({
    email:    ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]],
  });

  onSubmit() {
    if (this.loginForm.valid) {
      console.log(this.loginForm.value);
    }
  }
}

AReactive forms are only for complex forms — template-driven is recommended for every other case

BReactive forms have no validation — you must validate manually in onSubmit()

CReactive forms define structure and validation in TypeScript (code-first, testable, synchronous); template-driven forms define structure in the template with ngModel (simpler, less code, but less control)

DFormBuilder is mandatory to create a FormGroup

Answer all 10 questions (7 more), see explanations for every answer, and track your score.