Angular:Trying to do ngSwitch with Conditions

Question

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

Answer 1

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

Answer 2

I believe you are looking for ngStyle (conditional styling). You can use it like this:

  [ngStyle]="{
    'font-size':
      condition
        ? onTrue
        : onFalse
  }"