Template expressions and statements in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Angular

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

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

AonClick()

BonClick

CclickHandler()

DhandleClick

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting parentheses like (click)="onClick" passes $event automatically to the method.

Using a wrong method name that does not exist in the component.

In Angular templates, event bindings use the method name with parentheses to call the method on event.

2fill in blank

medium

Complete the interpolation expression to display the title property.

Angular

<h1>{{ [1] }}</h1>

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

Atitle()

BgetTitle()

Cthis.title

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses like title() which is invalid for properties.

Using this.title which is not recognized in templates.

Interpolation uses the property name directly without parentheses or this.

3fill in blank

hard

Fix the error in the event binding to correctly call increment() on button click.

Angular

<button (click)="[1]">Add</button>

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

Aincrement()

Bincrement

Cincrement.call()

Dincrement.bind(this)

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting parentheses causes the method not to be called.

Using call() or bind() which are not needed in templates.

To call a method on event, include parentheses in the event binding.

4fill in blank

hard

Fill both blanks to create a two-way binding with [(ngModel)] on the input element to the name property.

Angular

<input [1]="[2]">

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

A[(ngModel)]

B[ngModel]

C(ngModel)

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using only property binding [ngModel] or event binding (ngModel) instead of two-way binding.

Using the wrong syntax without brackets or parentheses.

Two-way binding uses the syntax [(ngModel)]="propertyName".

5fill in blank

hard

Fill all three blanks to create a template statement that calls submitForm() on form submit and prevents default behavior.

Angular

<form (submit)="[1]; $event.[2](); [3]">

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

AsubmitForm()

BpreventDefault

Creturn false

DstopPropagation

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting preventDefault() causes page reload.

Not returning false allows default form submission.

The form submit calls submitForm(), prevents default with preventDefault(), and returns false to stop further processing.