Structural vs attribute directives in Angular - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use a structural directive that conditionally shows a paragraph.

Angular

<p *[1]="isVisible">This paragraph is conditionally visible.</p>

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

AngIf

BngClass

CngStyle

DngModel

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngClass or ngStyle which only change appearance, not structure.

Forgetting the asterisk (*) before the directive.

The ngIf directive is a structural directive that adds or removes elements based on a condition.

2fill in blank

medium

Complete the code to apply a CSS class conditionally using an attribute directive.

Angular

<div [[1]]="isActive ? 'active' : ''">Content here</div>

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

AngIf

BngModel

CngStyle

DngClass

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngIf which removes or adds elements instead of changing classes.

Using ngStyle which changes styles but not classes.

The ngClass directive is an attribute directive that adds or removes CSS classes based on conditions.

3fill in blank

hard

Fix the error in the code to correctly use a structural directive for looping over items.

Angular

<li *ngFor="let item of [1]">{{item}}</li>

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

AitemsList[]

BitemsList()

CitemsList

DitemsList{}

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses which makes it a function call.

Using brackets or braces which are invalid here.

The ngFor directive expects an iterable variable, not a function call or invalid syntax.

4fill in blank

hard

Fill both blanks to create a structural directive that shows a message only if the user is logged in.

Angular

<div *[1]="[2]">Welcome back!</div>

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

AngIf

BisLoggedIn

CngFor

DuserLogged

Attempts:

3 left

💡 Hint

Common Mistakes

Using ngFor which is for loops, not conditions.

Using a variable name that does not exist or is incorrect.

The ngIf directive conditionally shows the element when isLoggedIn is true.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that maps item names to their lengths only if length is greater than 3.

Angular

const lengths = { [1]: [2].length for [1] of items if [2].length > 3 };

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

Aitem

Citems

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names inconsistently.

Using 'length' as a variable name which is a property.

This code uses item as the variable for each element in items. It maps item names to their lengths if the length is greater than 3.