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 ?
[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