angularng-switch

Angular:Trying to do ngSwitch with Conditions


I'm interested in doing ngswitch in case and The number is greater than 5 So give 50 px to its font size

The number is less than 2 so give it 15 px....

I could not find a suitable syntax so there is no code here


Solution

  • ngSwitch is not the best way to do this, since the ngSwitch expression expects a match in the ngSwitchCase.

    example from the documentation:

    <container-element [ngSwitch]="switch_expression">
      <!-- the same view can be shown in more than one case -->
      <some-element *ngSwitchCase="match_expression_1">...</some-element>
      <some-element *ngSwitchCase="match_expression_2">...</some-element>
      <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
      <!--default case when there are no matches -->
      <some-element *ngSwitchDefault>...</some-element>
    </container-element>
    

    So in your case, you are trying to pass a condition to match_expression when the directive expects a value. You could pass a simple condition (e.g. number > 5 or number < 2) in the switch_expression, but since you have more than one condition this will not work.

    You should go about it a different way, easiest would be with ngIf. If you only want to apply styling conditionally you could also use ngStyle or ngClass