javascriptangulardomangular2-directivesng-switch

ngSwitch is "Attribute Directive" OR "Structural Directive" ?

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 ?

Solution

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