Structural vs attribute directives in Angular - Quick Revision & Key Differences

Recall & Review

beginner

What is a structural directive in Angular?

A structural directive changes the layout by adding or removing elements in the DOM. It controls the structure of the view, like *ngIf or *ngFor.

beginner

What is an attribute directive in Angular?

An attribute directive changes the appearance or behavior of an existing element without changing the DOM structure. For example, ngClass or ngStyle.

beginner

How does *ngIf work as a structural directive?

*ngIf adds or removes elements from the DOM based on a condition. If the condition is false, the element is removed completely.

beginner

Can attribute directives add or remove elements from the DOM?

No, attribute directives only change how elements look or behave but do not add or remove elements from the DOM.

intermediate

Give an example of when to use a structural directive vs an attribute directive.

Use a structural directive like *ngFor to repeat elements or *ngIf to show/hide elements. Use an attribute directive like ngStyle to change colors or styles without changing the element itself.

Which Angular directive changes the DOM structure by adding or removing elements?

A Component

B Attribute directive

C Structural directive

D Service

Structural directives control the DOM layout by adding or removing elements.

Which directive type changes the style or behavior of an element without changing the DOM?

A Attribute directive

B Structural directive

C Pipe

D Module

Attribute directives modify appearance or behavior but do not change the DOM structure.

What does *ngIf do in Angular?

A Changes the style of an element

B Adds or removes elements based on a condition

C Repeats elements in a list

D Defines a new component

*ngIf conditionally adds or removes elements from the DOM.

Which of these is an example of an attribute directive?

A ngClass

B *ngIf

C ngModule

D *ngFor

ngClass changes the CSS classes of an element without changing the DOM.

Can attribute directives remove elements from the DOM?

A Yes, always

B Only if used with components

C Only in Angular 17+

D No, they only change appearance or behavior

Attribute directives do not remove or add elements; they only change how elements look or behave.

Explain the difference between structural and attribute directives in Angular.

Think about whether the directive adds/removes elements or just changes styles.

Describe a scenario where you would use a structural directive instead of an attribute directive.

When the page layout changes, structural directives are the choice.