Question

This is done by using Angular in Visual code:

Can you please give examples of the following?

1. Use Math.random function to generate a number between 20 and 100 and then use the ngSwitch directive to display a letter grade based on this class grading policy.

a. add implements OnInit to the AppComponent class

b. add variable x in the AppComponent class

c. add ngOnInit(){ this.x = Math.floor(Math.random()*10);}

d. add {{x}} in the app.components.html file

e. You should see numbers from 1-9 when you refresh the page

f. Change formula in #c to generate numbers from 20 to 100.

g. Change {{x}} in #d to ngSwitch directive

*****I am unable to get the ngSwitch directive to work for step g to display the letter grade A-F. Some help to get the ngSwitch to work would help*****

My codes are below

app.component.html

  

  

<div style="text-align:center">

  <h1>

  <span> Welcome to {{x}}!</span>

  </h1>

</div>

<p>Your grade: {{x}} </p>

<div [ngSwitch]= "switch_expression">

  <p *ngSwitchCase="90-100">A</p>

  <p *ngSwitchCase="80-89">B</p>

  <p *ngSwitchCase="70-79">C</p>

  <p *ngSwitchCase="60-69">D</p>

  <p *ngSwitchDefault>F</p>

</div>

app.component.ts

import { Component, OnInit} from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  title = 'module8';

  clicked = false;

  condition = true;

  x: number;

  switch_expression = "x"

ngOnInit() {

  this.x = Math.floor(Math.random()*(100-20+1)+20);

}

}

Answer 1

app.component.html

<div style="text-align:center">
  <h1>
  <span> Welcome to {{x}}!</span>
  </h1>
</div>

<p>Your grade: {{x}} </p>
<!-- Here you should write your expression based that value value switch case work -->
<div [ngSwitch]="y">        
  <p *ngSwitchCase="10">A</p>
  <p *ngSwitchCase="9">A</p>
  <p *ngSwitchCase="8">B</p>
  <p *ngSwitchCase="7">C</p>
  <p *ngSwitchCase="6">D</p>
  <p *ngSwitchDefault>F</p>
</div>

app.component.ts

import { Component, OnInit} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'module8';
  x: number;
  y: number;
ngOnInit() {
  this.x= Math.floor(Math.random()*(100-20+1)+20);   //Its generate random number between 20 to 100
  this.y=Math.floor((this.x/10));           //here it devide the nunber by 10 so we get 1st digit on which we can decide range
                                        //for ex if x is 67 then y 6 so we can decide that its fall under 60 to 69 
  }
}

Output:

app.component.html

app.component.ts