1

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

Yosef Abada
  • 75
  • 6

2 Answers2

2

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

Haris Bouchlis
  • 2,366
  • 1
  • 20
  • 35
  • Bounchlis I did it **[ngStyle]="{'font-size.px':Tub.scoops > 5 ? 30 : 15}"** But it's not good for me because I want to make some conditions – Yosef Abada May 21 '22 at 06:31
1

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

  [ngStyle]="{
    'font-size':
      condition
        ? onTrue
        : onFalse
  }"
Max Tuzenko
  • 1,051
  • 6
  • 18
  • I tried to do this before the ngswitch but encountered a problem Because I'm interested in setting a size according to the condition But I have to also give the opposite size which is not good for me I want to check if it is larger than a certain number so give it a specific size without else In addition I have to set 3 such that it seems to me possible only 1 – Yosef Abada May 21 '22 at 06:29
  • If you don´t want else statement you can try this trick: condition && onTrue – Max Tuzenko May 21 '22 at 06:40
  • like this: **[ngStyle]="{'font-size.px':Tub.scoops > 5 && 30}"** If I want to do some of these is it possible? – Yosef Abada May 21 '22 at 06:43
  • Not sure about your syntax. I would write it like this: [ngStyle]="{'font-size': Tub.scoops > 5 && '30px'}" – Max Tuzenko May 21 '22 at 06:53
  • syntax errorrrr – Yosef Abada May 21 '22 at 06:56
  • Had a quotes typo, now edited. And confirmed on my project. – Max Tuzenko May 21 '22 at 07:02
  • Okay, if I want to add 2 more conditions is this legal? – Yosef Abada May 21 '22 at 07:05
  • Testing limits of physics? Haven´t tested that. But I don´t see why it shouldn´t work. You may have to use parenthesis: [ngStyle]="{'font-size': (condition1 || condition2) && '30px'}" – Max Tuzenko May 21 '22 at 07:09
  • That's not what I meant, I want different conditions and set different size, I tried but it overwhelms me first – Yosef Abada May 21 '22 at 07:12
  • I believe you mean conditional chains. Just tested, seems to work fine. [fiddle](https://jsfiddle.net/FrzJck/zxb47ajc/) – Max Tuzenko May 21 '22 at 07:32