1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img width="40" alt="Angular Logo"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />
<div>
<span>Home</span>
<span>นศ.</span>
<span>คะแนน</span>
<span class="spacer"></span>
<a href="#">Login</a>
<div class="spacer"></div>
</div>
</div>
<!-- Students -->
<div class="content" role="main">
<h1><b>Students</b></h1>
<br>
<div *ngFor='let s of students' class="card w-50">
<span>{{s.id}} {{s.name}} {{s.email}}</span>
</div>
</div>
<!-- Courses -->
<div class="content" role="main">
<h1><b>Courses</b></h1>
<br>
<div *ngFor='let c of courses' class="card w-50">
<span>{{c.title}} {{c.description}}</span>
</div>
</div>
<!-- Lecturers -->
<div class="content" role="main">
<h1><b>Lecturers</b></h1>
<br>
<div *ngFor='let l of lecturers' class="card w-50">
<span>{{l.id}} {{l.name}}</span>
</div>
</div>
<!-- Scores -->
<div class="content" role="main">
<h1><b>Scores</b></h1>
<br>
<div *ngFor='let sc of scores' class="card w-50">
<span>{{sc.student}} {{sc.score}} {{sc.full_mark}}</span>
</div>
</div>
<router-outlet></router-outlet>