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.

Practice

1. What is the purpose of using {{ expression }} in an Angular template?

easy

A. To display the value of the expression in the HTML

B. To run a function when a button is clicked

C. To define a new component

D. To import external stylesheets

Solution

1. Step 1: Understand template expressions

   Template expressions inside {{ }} are used to show data or values in the HTML view.

2. Step 2: Differentiate from statements

   Statements run code on events, but expressions only display values.

3. Final Answer:

   To display the value of the expression in the HTML -> Option A

4. Quick Check:

   Template expressions = display data [OK]

Hint: Remember {{ }} always shows data, not runs code [OK]

Common Mistakes:

• Confusing expressions with event handlers
• Thinking {{ }} runs functions on click
• Using {{ }} to import files

2. Which of the following is the correct syntax to bind a click event in an Angular template?

easy

A. <button <click>="doSomething()">Click</button>

B. <button (click)="doSomething()">Click</button>

C. <button [click]="doSomething()">Click</button>

D. <button {click}="doSomething()">Click</button>

Solution

1. Step 1: Recall Angular event binding syntax

   Angular uses parentheses around event names to bind events, like (click).

2. Step 2: Check each option

   Only <button (click)="doSomething()">Click</button> uses the correct (click) syntax with quotes and parentheses.

3. Final Answer:

   <button (click)="doSomething()">Click</button> -> Option B

4. Quick Check:

   Event binding uses (event) syntax [OK]

Hint: Event bindings always use parentheses (event) [OK]

Common Mistakes:

• Using square brackets instead of parentheses
• Using curly braces instead of parentheses
• Missing quotes around the method call

3. Given the component property count = 5, what will be displayed by this template snippet?
<div>Count: {{ count + 3 }}</div>

medium

A. Count: 8

B. Count: count + 3

C. Count: 53

D. Count: undefined

Solution

1. Step 1: Evaluate the expression inside {{ }}

   The expression is count + 3. Since count is 5, the expression becomes 5 + 3.

2. Step 2: Calculate the result

   5 + 3 equals 8, so the displayed text is "Count: 8".

3. Final Answer:

   Count: 8 -> Option A

4. Quick Check:

   5 + 3 = 8 [OK]

Hint: Expressions inside {{ }} calculate values immediately [OK]

Common Mistakes:

• Treating expression as a string literal
• Concatenating numbers as strings
• Expecting undefined if property missing

4. Identify the error in this Angular template snippet:
<button (click)="increment">Add</button>
Assuming the component has a method increment().

medium

A. Method name should be in double curly braces

B. Using square brackets instead of parentheses

C. Missing parentheses after method name in event binding

D. No error, syntax is correct

Solution

1. Step 1: Check event binding syntax

   The event binding calls a method on click. It should include parentheses to invoke the method, like increment().

2. Step 2: Identify the missing parentheses

   The code uses increment without parentheses, so the method won't be called.

3. Final Answer:

   Missing parentheses after method name in event binding -> Option C

4. Quick Check:

   Call methods with () in (event) bindings [OK]

Hint: Always add () to call methods in (event) bindings [OK]

Common Mistakes:

• Omitting parentheses after method name
• Using {{ }} inside event bindings
• Confusing event and property bindings

5. You want to display a user's full name in the template using {{ }}, but only if both firstName and lastName exist. Which template expression correctly shows the full name or 'Guest' if either is missing?

hard

A. {{ firstName + ' ' + lastName || 'Guest' }}

B. {{ firstName || lastName ? firstName + ' ' + lastName : 'Guest' }}

C. {{ firstName && lastName && firstName + ' ' + lastName || 'Guest' }}

D. {{ firstName && lastName ? firstName + ' ' + lastName : 'Guest' }}

Solution

1. Step 1: Understand the condition

   We want to show full name only if both firstName and lastName exist (are truthy).

2. Step 2: Analyze each option

   {{ firstName && lastName ? firstName + ' ' + lastName : 'Guest' }} uses firstName && lastName ? fullName : 'Guest', which correctly checks both exist before concatenating. Others either use OR or incorrect logic.

3. Final Answer:

   {{ firstName && lastName ? firstName + ' ' + lastName : 'Guest' }} -> Option D

4. Quick Check:

   Use && with ?: for conditional display [OK]

Hint: Use && with ?: to check both values before display [OK]

Common Mistakes:

• Using || instead of && to check both values
• Omitting the conditional operator
• Relying on || alone which may show partial names