In: Computer Science
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
2. Use attribute directives to display credit card
logo based on the credit card number
Use simplified rules as follows:
4 visa
5 mastercard
34 and 37 amex
30, 36, 38, 39 diners
60, 64, 65 discover
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.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
ngOnInit() {
this.x = Math.floor(Math.random()*10);
}
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
<div style="text-align:center">
<h1>
Welcome to {{x}}.
</h1>
</div>
<app-new-cmp></app-new-cmp>
</body> </html>