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
CodePudding user response:
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
CodePudding user response:
I believe you are looking for ngStyle (conditional styling). You can use it like this:
[ngStyle]="{
'font-size':
condition
? onTrue
: onFalse
}"