Container and presentational components in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a presentational component with standalone setup.

Angular

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

@Component({
  selector: 'app-presentational',
  template: `<p>Display data here</p>`,
  standalone: [1]
})
export class PresentationalComponent {}

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

Afalse

Bundefined

Cnull

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false or omitting it causes the component to require a module.

Using null or undefined is invalid for standalone property.

The standalone property must be set to true to make the component standalone.

2fill in blank

medium

Complete the code to inject a service into a container component using Angular's inject() function.

Angular

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

@Component({
  selector: 'app-container',
  template: `<app-presentational [data]="data"></app-presentational>`,
  standalone: true,
  imports: []
})
export class ContainerComponent {
  private dataService = [1](DataService);
  data = this.dataService.getData();
}

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

AuseService

Bnew

Cinject

Dprovide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'new' to create a service instance instead of inject.

Using non-existent functions like 'useService' or 'provide' here.

Angular 17+ uses the inject() function to get service instances inside components.

3fill in blank

hard

Fix the error in the presentational component input binding syntax.

Angular

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

@Component({
  selector: 'app-presentational',
  template: `<p>{{ data }}</p>`,
  standalone: true
})
export class PresentationalComponent {
  @Input() [1]: string = '';
}

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

Adata

BData

CinputData

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different property name than the one bound in the container component.

Capitalizing the property name incorrectly.

The input property name must match the binding name used in the container component, which is data.

4fill in blank

hard

Fill both blanks to correctly pass data from container to presentational component.

Angular

<app-presentational [1]="[2]"></app-presentational>

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

A[data]

Bdata

Cvalue

D[value]

Attempts:

3 left

💡 Hint

Common Mistakes

Using attribute binding without square brackets.

Using mismatched property names.

Use property binding syntax [data] to bind the container's data property to the presentational component's input.

5fill in blank

hard

Fill all three blanks to create a container component that imports the presentational component and passes data correctly.

Angular

import { Component, inject } from '@angular/core';
import { [1] } from './presentational.component';

@Component({
  selector: 'app-container',
  standalone: true,
  imports: [[2]],
  template: `<app-presentational [3]="data"></app-presentational>`
})
export class ContainerComponent {
  data = 'Hello from container';
}

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

APresentationalComponent

C[data]

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import the presentational component.

Not including the component in the imports array.

Using attribute binding instead of property binding.

The container imports the presentational component class, includes it in the imports array, and uses property binding [data] to pass data.