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

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;

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

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 }}