3

I am a bit confused regarding ngSwitch directive -- whether it is 'attribute directive' or 'structural directive'.

Attribute directives are written with 'square brackets' like [ngStyle], [ngClass], etc. (and we write it as [ngSwitch] which refers it as 'Attribute Directives').

Structural directives are written with 'aestrick' like *ngFor, *ngIf, etc. (and we write the cases as *ngSwitchCase="..." which means it is a structural directive).

<div [ngSwitch]="colorValue">
    <p *ngSwitchCase="red">Red</p>
    <p *ngSwitchCase="blue">Blue</p>
    <p *ngSwitchCase="green">Green</p>
</div>

As per the code above, it is getting very confusing to categorize ngSwtich to either of the Directive Categories! Can someone help me out in understanding the directive-type of ngSwitch ?

Deadpool
  • 7,811
  • 9
  • 44
  • 88

6 Answers6

5

[ngSwitch] is an attribute directive used in combination with *ngSwitchCase and *ngSwitchDefault that are both structural directives.

This is clearly explained in Angular's documentation...

  • NgSwitch — an attribute directive that changes the behavior of its companion directives.
  • NgSwitchCase — structural directive that adds its element to the DOM when its bound value equals the switch value and removes its bound value when it doesn't equal the switch value.
  • NgSwitchDefault — structural directive that adds its element to the DOM when there is no selected NgSwitchCase.

https://angular.io/guide/built-in-directives#switching-cases-with-ngswitch

j3ff
  • 5,719
  • 8
  • 38
  • 51
  • And yet in the same [docs](https://angular.io/guide/template-syntax#built-in-structural-directives) : *"This section is an introduction to the common structural directives: NgIf, NgSwitch, NgForOf"*?, maybe it would've been better to quote *"NgSwitch itself is not a structural directive. It's an attribute directive that controls the behavior of the other two switch directives. That's why you write [ngSwitch], never *ngSwitch...."* from [here](https://angular.io/guide/structural-directives#inside-ngswitch-directives) – Nick is tired Nov 05 '18 at 02:59
  • Link probably out of date.. try: https://angular.io/api/common/NgSwitch – Kieran Ryan Apr 13 '21 at 22:32
  • @KieranRyan Thank you, I updated the outdated link to the new related section of the documentation. – j3ff Apr 13 '21 at 23:45
0

It is a structural directive

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

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
0

As I understand it , 'structural directive' change the dom's struct. attribute directive change the dom's attribute,such as color,background and so on

ngSwitch change it's children's length , so its a structural directive,

junk
  • 917
  • 3
  • 11
  • 29
0

Structural Directive:

What are structural directives?

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants.

Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name as in this example.

Refer: https://angular.io/guide/structural-directives

Dinesh Ghule
  • 3,423
  • 4
  • 19
  • 39
0

ngSwitch is a built-in structural directive. [https://angular.io/guide/structural-directives]

@j3ff: The (*) star on *ngSwitchCase is merely sugar syntax, it does not indicate the type of directive.

It could be written the long way like this...

<div class="course-category" [ngSwitch]="colorValue">
 <ng-template [ngSwitchCase]="'RED'">
  <div>
   <p>Red</p>
  </div>
 </ng-template>
altergothen
  • 425
  • 1
  • 7
  • 12
  • I thought i read somewhere else, * represent structure directive. ngClass and ngStyle are attribute directive, and it does not have * in front – Nick Wills Mar 09 '23 at 11:44
0

Yes, it will be a bit confusing for beginners but still it is not that much difficult to understand. Let me explain clearly.

ngSwitch directive is a unique one which is classified as a structural directive because it can alter (add or remove) elements based from the DOM based on the condition.

Though it is an structural directive, the syntax for ngSwitch comprises both attribute-like and structural-like parts.

The difference arises because the ngSwitch is used as attribute directive and the ngSwitchCase is used as structural directive.

But both of them are classified as structural directive because they both are participating in building of conditional blocks.

NIKIL S
  • 11
  • 3