Standalone component declaration in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a standalone Angular component.

Angular

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

@Component({
  selector: 'app-hello',
  template: `<h1>Hello, Angular!</h1>`,
  standalone: [1]
})
export class HelloComponent {}

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

Afalse

Btrue

C'yes'

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a boolean for 'standalone'.

Omitting the 'standalone' property entirely.

Setting standalone: true declares the component as standalone, meaning it does not require a module.

2fill in blank

medium

Complete the code to import the CommonModule in a standalone component.

Angular

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

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CommonModule],
  template: `<p>Example works!</p>`
})
export class ExampleComponent {}

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

ACommonModule

BFormsModule

CRouterModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormsModule instead of CommonModule.

Forgetting to import any module for common directives.

CommonModule provides common directives like ngIf and ngFor, and must be imported explicitly in standalone components.

3fill in blank

hard

Fix the error in the standalone component declaration by completing the missing property.

Angular

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

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

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

Aselector

Bimports

CtemplateUrl

Dstandalone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'imports' instead of 'standalone'.

Using 'templateUrl' instead of 'standalone'.

The property to declare a standalone component is 'standalone', set to true.

4fill in blank

hard

Fill both blanks to declare a standalone component that imports FormsModule.

Angular

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

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [[2]],
  template: `<input [(ngModel)]="name">`
})
export class FormComponent {
  name = '';
}

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

AFormsModule

BCommonModule

CRouterModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing CommonModule instead of FormsModule.

Forgetting to add FormsModule to the imports array.

FormsModule must be imported and added to the imports array to use ngModel in a standalone component.

5fill in blank

hard

Fill all three blanks to create a standalone component that imports RouterModule and CommonModule and uses a selector.

Angular

import { Component } from '@angular/core';
import { [1] } from '@angular/router';
import { [2] } from '@angular/common';

@Component({
  selector: '[3]',
  standalone: true,
  imports: [RouterModule, CommonModule],
  template: `<nav>Navigation here</nav>`
})
export class NavComponent {}

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

ARouterModule

BCommonModule

Capp-nav

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using FormsModule instead of CommonModule.

Using an invalid selector string.

RouterModule and CommonModule must be imported from their packages, and the selector should be a valid string like 'app-nav'.

Practice

1. What does adding standalone: true in an Angular component's decorator do?

easy

A. Disables change detection for the component.

B. Makes the component lazy-loaded automatically.

C. Registers the component globally in the Angular app.

D. Declares the component as standalone, removing the need for NgModule declaration.

Solution

1. Step 1: Understand Angular component declaration

   Normally, Angular components must be declared inside an NgModule to be usable.

2. Step 2: Effect of standalone: true

   Setting standalone: true allows the component to be used without declaring it in any NgModule.

3. Final Answer:

   Declares the component as standalone, removing the need for NgModule declaration. -> Option D

4. Quick Check:

   Standalone component = no NgModule needed [OK]

Hint: Standalone means no NgModule needed for the component [OK]

Common Mistakes:

• Thinking standalone makes component lazy-loaded
• Assuming standalone registers component globally
• Confusing standalone with change detection settings

2. Which of the following is the correct syntax to declare a standalone component in Angular?

easy

A. @Component({ selector: 'app-test', standalone: true, template: 'Test' }) export class TestComponent {}

B. @Component({ selector: 'app-test', standalone: false, template: 'Test' }) export class TestComponent {}

C. @Component({ selector: 'app-test', standalone: true, templateUrl: 'test.html' }) export class TestComponent {} NgModule({ declarations: [TestComponent] })

D. @Component({ selector: 'app-test', standalone: true }) export class TestComponent { template: 'Test' }

Solution

1. Step 1: Check the standalone property usage

   The standalone property must be set to true inside the @Component decorator.

2. Step 2: Verify template declaration and class export

   The template can be inline with template or external with templateUrl. The class must be exported properly.

3. Final Answer:

   @Component({ selector: 'app-test', standalone: true, template: '<p>Test</p>' }) export class TestComponent {} -> Option A

4. Quick Check:

   Standalone true inside @Component with inline template [OK]

Hint: Standalone true must be inside @Component decorator [OK]

Common Mistakes:

• Setting standalone to false
• Declaring template outside the decorator
• Mixing NgModule declaration with standalone component

3. Given this standalone component declaration, what will be the rendered output?

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

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `
Hello, {{ name }}!
`
})
export class HelloComponent {
  name = 'Angular';
}

medium

A. No output because component is standalone

B. Hello, {{ name }}!

C. Hello, Angular!

D. Error: Property 'name' is undefined

Solution

1. Step 1: Understand template interpolation

   The template uses {{ name }} which Angular replaces with the component's property value.

2. Step 2: Check the property value

   The component defines name = 'Angular', so interpolation outputs 'Angular'.

3. Final Answer:

   <h1>Hello, Angular!</h1> -> Option C

4. Quick Check:

   Template interpolation replaces {{ name }} with 'Angular' [OK]

Hint: Interpolation shows property value inside template [OK]

Common Mistakes:

• Thinking interpolation shows raw {{ name }}
• Assuming standalone disables property binding
• Expecting runtime error for missing property

4. Identify the error in this standalone component declaration:

@Component({
  selector: 'app-sample',
  standalone: true,
  template: '
Sample
',
  imports: [CommonModule]
})
export class SampleComponent {}

medium

A. The imports array must be inside @NgModule, not @Component

B. Missing import statement for CommonModule

C. CommonModule must be imported from '@angular/common' and declared in imports

D. CommonModule cannot be imported in standalone components

Solution

1. Step 1: Check imports usage in standalone component

   Standalone components can import modules like CommonModule via the imports array in the decorator.

2. Step 2: Verify import statement presence

   The code uses CommonModule in imports but does not import it from '@angular/common' at the top.

3. Final Answer:

   Missing import statement for CommonModule -> Option B

4. Quick Check:

   Imports array needs proper import statements [OK]

Hint: Always import modules before using in imports array [OK]

Common Mistakes:

• Thinking imports array is invalid in @Component
• Forgetting to import CommonModule from '@angular/common'
• Assuming CommonModule cannot be used in standalone components

5. You want to create a standalone Angular component that uses another standalone component called ButtonComponent. How should you declare the imports array in your component decorator?

hard

A. @Component({ standalone: true, imports: [ButtonComponent], template: '' })

B. @Component({ standalone: true, imports: ['ButtonComponent'], template: '' })

C. @Component({ standalone: true, imports: [NgModule], template: '' })

D. @Component({ standalone: true, template: '' })

Solution

1. Step 1: Understand how to use other standalone components

   Standalone components can import other standalone components by listing them in the imports array.

2. Step 2: Correct syntax for imports array

   The imports array must contain the component class itself, not a string or NgModule.

3. Final Answer:

   @Component({ standalone: true, imports: [ButtonComponent], template: '<app-button></app-button>' }) -> Option A

4. Quick Check:

   Imports array includes component classes, not strings [OK]

Hint: Import component classes directly, not strings or modules [OK]

Common Mistakes:

• Using string names instead of component classes in imports
• Importing NgModule instead of component
• Omitting imports array when using other standalone components