Component template basics in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a title in the component template.

Angular

<h1>[1]</h1>

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

Atitle

BTitle

Cthis.title

Dcomponent.title

Attempts:

3 left

💡 Hint

Common Mistakes

Using this.title inside the template binding.

Using a string literal instead of the property name.

The template uses {{title}} to bind the component's title property.

2fill in blank

medium

Complete the code to bind the button click event to the onClick method.

Angular

<button ([1])="onClick()">Click me</button>

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

Atap

Bclick

CclickEvent

DonClick

Attempts:

3 left

💡 Hint

Common Mistakes

Using the method name instead of the event name inside parentheses.

Using incorrect event names like tap.

The Angular event binding syntax uses parentheses with the event name, like (click).

3fill in blank

hard

Fix the error in the template to correctly display the user's name property.

Angular

<p>Hello, [1]</p>

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

Athis.user.name

BuserName

Cuser.name

Duser->name

Attempts:

3 left

💡 Hint

Common Mistakes

Using this.user.name inside the template.

Using invalid syntax like user->name.

Use dot notation to access nested properties in the template without this.

4fill in blank

hard

Fill both blanks to bind the input value and update the username property.

Angular

<input [[1]]="username" ([2])="username = $event.target.value">

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

Avalue

Binput

Cclick

Dchecked

Attempts:

3 left

💡 Hint

Common Mistakes

Using click event instead of input.

Binding to checked instead of value.

The input's value property is bound with square brackets, and the input event updates the property.

5fill in blank

hard

Fill all three blanks to create a list displaying each item from the items array.

Angular

<ul>
  <li *ngFor="let [1] of [2]; [3]" >[1]</li>
</ul>

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

Aitem

Bitems

CtrackBy: trackById

DtrackBy

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names like items instead of item.

Using plain trackBy instead of trackBy: trackById syntax.

The *ngFor directive loops over items with item as the variable. The trackBy: trackById input helps Angular track items efficiently.