Structural vs attribute directives in Angular - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Identify the type of directive

Which of the following Angular directives is a structural directive that changes the DOM layout by adding or removing elements?

A *ngIf

B [ngStyle]

C (click)

D [ngClass]

💡 Hint

Structural directives usually start with an asterisk (*) and control the presence of elements.

*ngIf is a structural directive that adds or removes elements from the DOM based on a condition. [ngStyle] and [ngClass] are attribute directives that change the appearance but do not add or remove elements. (click) is an event binding, not a directive.

❓ component_behavior

intermediate

Effect of attribute directive on element

Given this Angular template snippet:

<div [ngClass]="{ 'highlight': isActive }">Hello</div>

What happens when isActive is true?

A The <code>div</code> element is removed from the DOM.

B The <code>highlight</code> CSS class is added to the <code>div</code> element.

C The <code>div</code> element is replaced with a <code>span</code> element.

D The <code>div</code> element's inline style changes to <code>color: red</code>.

💡 Hint

Attribute directives change appearance or behavior without changing the DOM structure.

The [ngClass] attribute directive adds or removes CSS classes based on the expression. When isActive is true, the highlight class is added to the div. It does not remove or replace the element.

📝 Syntax

advanced

Correct syntax for structural directive

Which option shows the correct Angular syntax to conditionally display a paragraph using a structural directive?

A <p *ngIf="showParagraph">This is a paragraph.</p>

B <p [ngIf]="showParagraph">This is a paragraph.</p>

C <p (ngIf)="showParagraph">This is a paragraph.</p>

D <p #ngIf="showParagraph">This is a paragraph.</p>

💡 Hint

Structural directives use an asterisk (*) before their name.

The correct syntax for structural directives uses an asterisk (*) before the directive name, like *ngIf. The other options use invalid syntax for structural directives.

🔧 Debug

advanced

Why does this structural directive cause an error?

Consider this Angular template code:

<div *ngFor="let item of items">{{ item }}</div>
<div *ngFor="items">{{ item }}</div>

Why does the second div cause an error?

A Because *ngFor only works with arrays of numbers.

B Because *ngFor cannot be used on <code>div</code> elements.

C Because <code>items</code> is not defined in the component.

D Because *ngFor requires a <code>let</code> variable declaration to iterate over the list.

💡 Hint

Check the syntax required by *ngFor to loop over a list.

The *ngFor directive requires a syntax like *ngFor="let item of items" to declare the loop variable. The second div misses the let item of part, causing a syntax error.

❓ state_output

expert

Output after toggling structural directive

Given this Angular component template and initial state:

<button (click)="show = !show">Toggle</button>
<div *ngIf="show">Visible</div>

Initially, show is false. What is the rendered output after clicking the button twice?

A The <code>div</code> with text 'Visible' is shown after two clicks.

B An error occurs because *ngIf cannot toggle.

C No <code>div</code> is visible after two clicks.

D The <code>div</code> is visible only after the first click, then disappears after the second.

💡 Hint

Think about how toggling a boolean twice affects the condition.

Starting with show = false, the first click sets show = true, so the div appears. The second click sets show = false again, so the div disappears. After two clicks, no div is visible.