How can I do a number condition of equal, greater than and less than in Angular using ngSwitch?

user_17446032 0
Viewed 440

I am learning angular structural directives and I have encountered the following problem, I tried to use the switchcase but I am having a value that is not correct based on my condition.

I want to have an output of average if the grade is lower than 80 or higher than 75 but the output that I am getting is Invalid. However, once I removed the div tag of invalid then I do not have an output.

Here is my switch condition.

Template:

<div [ngSwitch]="grade">
    <div *ngSwitchCase="grade >= 75 && grade <= 80">Average</div>
    <div *ngSwitchDefault>Invalid</div>
</div>

Typescript:

public grade = 75;
angular
4 Answers

ngSwitchCase cannot hold a condition but value only as it does simple === evaluation. But what you can do is to create some kind of state for your grades in the component which you will then provide to ngSwitchCase. For instance in component (I suggest creating a separate file for Grade object) :

class Grade {
  value: number;
  state: string
}

var marks: Grade = new Grade();
marks.value = 7;
 
switch (true) {
    case (marks.value >= 0 && marks.value <= 4):
        marks.state = "bad"
        break;
    case (marks.value >= 5 && marks.value <= 8):
        marks.state = "better"
        break;
    default:
        marks.state = "invalid"
}

Than in your HTML:

<div [ngSwitch]="grade.state">
  <div *ngSwitchCase="bad">Bad</div>
  <div *ngSwitchCase="better">Average</div>
  <div *ngSwitchDefault>Invalid</div>
</div>
user_104719420

ngSwitch same as switch case in programing. You have to give fixed option value.

If you want to make the section as dynamic, use *ngIf instead of ngSwitch.

user_16550620

How can you make Angular Code Snippets? Would love to test this, but imho something like this should work:

<div [ngSwitch]="'static_string'">
    <div *ngSwitchCase="{{ (grade >= 75 && grade <= 80) ? 'static_string' : '' }}">Average</div>
    <div *ngSwitchDefault>Invalid</div>
</div>

and if this works, then this should work too:

<div [ngSwitch]="'true'">
    <div *ngSwitchCase="{{ grade >= 75 && grade <= 80 }}">Average</div>
    <div *ngSwitchDefault>Invalid</div>
</div>
user_9909710

ngSwitch uses a specific value in the condition. Try to use *ngIf for each condition or make a new Pipe to transform grade to a constant value like

type Grade = 'Average' | 'Master' | 'Invalid';

@Pipe({name: 'gradeClass'})
export class GradeTransformer implements PipeTransform {
  transform(value: number): Grade {
    switch (true) {
      case (value >= 75 && value <= 80): {
        return 'Average';
      }
      case (value > 80): {
        return 'Master';
      }
      default: {
        return 'Invalid';
      }
    }
  }
}

and in your component. just:

{{ grade | gradeClass }}
user_131877960
Related