@Input decorator for parent to child in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the decorator needed to receive data from a parent component.

Angular

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

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

AComponent

BInput

COutput

DInjectable

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Output instead of @Input

Forgetting to import the decorator

Importing from the wrong Angular package

The @Input decorator is imported from '@angular/core' to allow a child component to receive data from its parent.

2fill in blank

medium

Complete the code to declare an input property named 'title' in the child component.

Angular

@Input() [1]: string;

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

Aname

Bvalue

Cdata

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different property name than expected

Not declaring the property type

Forgetting the @Input decorator

The property decorated with @Input() must match the name used to receive data from the parent. Here, 'title' is the input property.

3fill in blank

hard

Fix the error in the child component to correctly receive the input property 'count'.

Angular

export class ChildComponent {
  [1] count: number;
}

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

A@Input()

B@Inject()

C@Output()

D@ViewChild()

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Output instead of @Input

Using @Inject which is for dependency injection

Using @ViewChild which is for accessing child elements

To receive data from the parent, the property must be decorated with @Input().

4fill in blank

hard

Fill both blanks to define an input property 'userName' with an alias 'name' in the child component.

Angular

@Input('[1]') [2]: string;

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

Aname

BuserName

Cuser

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same name for alias and property

Forgetting to put the alias string in quotes

Mixing up property and alias names

The alias 'name' is used in the @Input decorator, while the property name is 'userName'. This allows the parent to bind using 'name'.

5fill in blank

hard

Fill all three blanks to create a child component that receives 'age' as input and uses it in the template.

Angular

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

@Component({
  selector: 'app-child',
  template: `<p>Age: [2]</p>`
})
export class ChildComponent {
  @Input() [3]: number;
}

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

AInput

Bage

CageValue

DOutput

Attempts:

3 left

💡 Hint

Common Mistakes

Importing @Output instead of @Input

Using different names in property and template

Forgetting to decorate the property

The @Input decorator is imported, the property name is 'age', and the template uses 'age' to display the value.