first commit

src/app/app.component.html

+<!-- CSS only -->
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+
+<!-- JS, Popper.js, and jQuery -->
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 <style>
   :host {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -308,49 +315,96 @@
 
 <div class="content" role="main">
 
-  <!-- Highlight Card -->
-  <div class="card highlight-card card-small">
-
-    <svg id="rocket" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" width="101.678" height="101.678" viewBox="0 0 101.678 101.678">
-      <g id="Group_83" data-name="Group 83" transform="translate(-141 -696)">
-        <circle id="Ellipse_8" data-name="Ellipse 8" cx="50.839" cy="50.839" r="50.839" transform="translate(141 696)" fill="#dd0031"/>
-        <g id="Group_47" data-name="Group 47" transform="translate(165.185 720.185)">
-          <path id="Path_33" data-name="Path 33" d="M3.4,42.615a3.084,3.084,0,0,0,3.553,3.553,21.419,21.419,0,0,0,12.215-6.107L9.511,30.4A21.419,21.419,0,0,0,3.4,42.615Z" transform="translate(0.371 3.363)" fill="#fff"/>
-          <path id="Path_34" data-name="Path 34" d="M53.3,3.221A3.09,3.09,0,0,0,50.081,0,48.227,48.227,0,0,0,18.322,13.437c-6-1.666-14.991-1.221-18.322,7.218A33.892,33.892,0,0,1,9.439,25.1l-.333.666a3.013,3.013,0,0,0,.555,3.553L23.985,43.641a2.9,2.9,0,0,0,3.553.555l.666-.333A33.892,33.892,0,0,1,32.647,53.3c8.55-3.664,8.884-12.326,7.218-18.322A48.227,48.227,0,0,0,53.3,3.221ZM34.424,9.772a6.439,6.439,0,1,1,9.106,9.106,6.368,6.368,0,0,1-9.106,0A6.467,6.467,0,0,1,34.424,9.772Z" transform="translate(0 0.005)" fill="#fff"/>
-        </g>
-      </g>
-    </svg>
-
-    <span>{{ title }} app is running!</span>
-
-  </div>
-  <div>
+  <span>Student</span>
+  <table class="table table-hover">
+    <thead>
+      <tr>
+        <th scope="col">id</th>
+        <th scope="col">name</th>
+        <th scope="col">email</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let s of students">
+        <td>{{ s.id }}</td>
+        <td>{{ s.name }}</td>
+        <td>@{{ s.email }}</td>
+      </tr>
+    </tbody>
+  </table><br>
 
-  </div>
-  <div *ngFor="let s of students" class="card">
-    <div class="card hilight-card card-small">
-      <span>{{ s.id }}</span>
-      {{ s.name }} {{ s.email }}
-    </div>
-  </div>
 
   <span>Course</span>
-  <div *ngFor="let c of courses" class="card">
-      {{ c.title }} {{ c.description }}
-  </div>
+  <table class="table table-hover">
+    <thead>
+      <tr>
+        <th scope="col">title</th>
+        <th scope="col">description</th>
+
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let c of courses" >
+        <td>{{ c.title }}</td>
+        <td>{{ c.description }}</td>
+      </tr>
+    </tbody>
+  </table><br>
 
   <span>Lecturer</span>
-  <div *ngFor="let l of lecturers" class="card">
-      {{ l.id }} {{ l.name }}
-  </div>
-
-  <span>Score</span>
-  <div *ngFor="let sc of scores" class="card">
-      <span>{{ sc.Student.id }}{{ sc.Student.name }}</span>
-      score: {{ sc.score }} {{ sc.full_mark }}
-
-  </div>
+  <table class="table table-hover">
+    <thead>
+      <tr>
+        <th scope="col">id</th>
+        <th scope="col">name</th>
+
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let l of lecturers">
+        <td>{{ l.id }}</td>
+        <td>{{ l.name }}</td>
+      </tr>
+    </tbody>
+  </table><br>
 
+  <span>Lecturer</span>
+  <table class="table table-hover">
+    <thead>
+      <tr>
+        <th scope="col">id</th>
+        <th scope="col">name</th>
+
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let l of lecturers">
+        <td>{{ l.id }}</td>
+        <td>{{ l.name }}</td>
+      </tr>
+    </tbody>
+  </table><br>
+
+
+  <table class="table table-hover">
+    <thead>
+      <tr>
+        <th scope="col">Student ID</th>
+        <th scope="col">Student name</th>
+        <th scope="col">score</th>
+        <th scope="col">full_mark</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let sc of scores">
+        <td>{{ sc.Student.id }}</td>
+        <td>{{ sc.Student.name }}</td>
+        <td>{{ sc.score }}</td>
+        <td>{{ sc.full_mark }}</td>
+      </tr>
+
+    </tbody>
+  </table>
 
 
 <router-outlet></router-outlet>

src/app/mock/mock-courses.ts

@@ -2,5 +2,6 @@ import { Course } from '../models/course';
 
 export const COURSES: Course[] = [
   {title: 'Course Web Application', description: 'คำอธิบายรายวิชา'},
+  {title: 'Course Web Application01', description: 'คำอธิบายรายวิชา01'},
 
 ];