Property binding with square brackets in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the src property of the img tag to the imageUrl variable.

Angular

<img [1]="imageUrl" alt="Image">

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

A(src)

B<src>

C{src}

D[src]

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of square brackets.

Using curly braces or angle brackets instead of square brackets.

In Angular, property binding uses square brackets around the property name, like [src].

2fill in blank

medium

Complete the code to bind the disabled property of the button to the isDisabled variable.

Angular

<button [1]="isDisabled">Click me</button>

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

A[disabled]

B(disabled)

C{disabled}

D<disabled>

Attempts:

3 left

💡 Hint

Common Mistakes

Using event binding syntax with parentheses.

Using curly braces or angle brackets.

Use square brackets to bind the disabled property to the variable isDisabled.

3fill in blank

hard

Fix the error in the code to correctly bind the value property of the input to the userName variable.

Angular

<input [1]="userName">

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

A{value}

B(value)

C[value]

D<value>

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses which is for event binding.

Using curly braces or angle brackets.

Property binding requires square brackets around the property name, so use [value].

4fill in blank

hard

Fill both blanks to bind the title property to pageTitle and the alt property to imageAlt.

Angular

<img [1]="pageTitle" [2]="imageAlt">

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

A[title]

B(title)

C[alt]

D(alt)

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses which is for event binding.

Mixing property and event binding syntax.

Use square brackets for property binding on both title and alt properties.

5fill in blank

hard

Fill all three blanks to bind href to linkUrl, target to linkTarget, and rel to linkRel.

Angular

<a [1]="linkUrl" [2]="linkTarget" [3]="linkRel">Link</a>

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

A[href]

B[target]

C[rel]

D(href)

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses which is for event binding.

Forgetting square brackets on any property.

All three attributes use property binding with square brackets.