Default change detection strategy in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the default change detection strategy in an Angular component.

Angular

@Component({
  selector: 'app-sample',
  template: `<p>Hello World</p>`,
  changeDetection: ChangeDetectionStrategy.[1]
})
export class SampleComponent {}

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

ACheckOnce

BOnPush

CDefault

DDetached

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'OnPush' instead of 'Default' for the default strategy.

Misspelling the strategy name.

The default change detection strategy in Angular is Default. It checks the component and its children every time change detection runs.

2fill in blank

medium

Complete the code to import the default change detection strategy from Angular core.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `<p>Test</p>`,
  changeDetection: ChangeDetectionStrategy.Default
})
export class TestComponent {}

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

AChangeDetectionStrategy

BInput

CNgModule

DOutput

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated symbols like NgModule or Input.

Forgetting to import ChangeDetectionStrategy.

You must import ChangeDetectionStrategy to use it in the component decorator.

3fill in blank

hard

Fix the error in the component decorator to use the default change detection strategy correctly.

Angular

@Component({
  selector: 'app-fix',
  template: `<p>Fix me</p>`,
  changeDetection: [1].Default
})
export class FixComponent {}

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

ADetectionStrategy

BChangeDetection

CChangeStrategy

DChangeDetectionStrategy

Attempts:

3 left

💡 Hint

Common Mistakes

Using partial or incorrect enum names.

Forgetting to import the enum.

The correct enum name is ChangeDetectionStrategy. Using any other name causes an error.

4fill in blank

hard

Fill both blanks to complete the component decorator using the default change detection strategy and import.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>Example</p>`,
  changeDetection: [2].Default
})
export class ExampleComponent {}

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

AChangeDetectionStrategy

BNgModule

CChangeDetection

DInput

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for import and decorator.

Importing unrelated symbols.

You must import ChangeDetectionStrategy and use it in the decorator to set the default strategy.

5fill in blank

hard

Fill all three blanks to create a component with default change detection strategy and a simple template.

Angular

import { Component, [1] } from '@angular/core';

@Component({
  selector: '[2]',
  template: `<p>[3]</p>`,
  changeDetection: ChangeDetectionStrategy.Default
})
export class MyComponent {}

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

AChangeDetectionStrategy

Bapp-my-component

CHello Angular

DInput

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong import names.

Invalid selector names.

Empty or missing template content.

The import must be ChangeDetectionStrategy. The selector is a valid component name like app-my-component. The template text can be any string, here Hello Angular.