Course Data Connected course list and details page

src/app/app-routing.module.ts

@@ -19,11 +19,11 @@ const routes: Routes = [
     { component: WelcomeComponent, path: 'welcome' },
     { component: TabsComponent, path: 'tabs' },
     { component: TabsComponent, path: 'tabs/:subpage' },
-    { component: CourseDetailsComponent, path: 'course-details/:heading' },
+    { component: CourseDetailsComponent, path: 'course-details' },
     { component: ChapterNotesComponent, path: 'chapter-notes/:heading' },
     { component: VideoChapterComponent, path: 'video-chapter/:heading' },
     { component: VideoNotesComponent, path: 'video-notes/:heading' },
-    { component: QuizComponent, path: 'quiz/:heading' },
+    { component: QuizComponent, path: 'quiz' },
     { component: CalendarComponent, path: 'calendar' },
     { component: AttendanceComponent, path: 'attendance'},
     { component: ForumPageComponent, path: 'forum'},

src/app/services/demo.service.ts

@@ -9,6 +9,165 @@ export class DemoService {
     demoType: Observable<string>;
     demoTypeObserver: Observer<string>;
 
+    courseData = [{
+        classLevel: '10',
+        courses: [{
+            id: '1',
+            name: 'Environmental Studies',
+            code: 'EVS',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            },
+            chapterList: [{
+                heading: 'Chapter 1',
+                isCompleted: false,
+                topics: [{
+                    heading: 'Living Things',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'downloaded',
+                    isCompleted: true,
+                    type: 'video',
+                    url: '/video-chapter',
+                    param: 'Living Things'
+                }, {
+                    heading: 'Living Things-1',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'none',
+                    isCompleted: true,
+                    type: 'notes',
+                    url: '/chapter-notes',
+                    param: 'Living Things-1'
+                }, {
+                    heading: 'Living Things-2',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'none',
+                    isCompleted: false,
+                    type: 'quiz',
+                    url: '/quiz',
+                    param: 'Living Things-2'
+                }]
+            }, {
+                heading: 'Chapter 2',
+                isCompleted: true,
+                topics: [{
+                    heading: 'Earth',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'none',
+                    isCompleted: true,
+                    type: 'video',
+                    url: '/video-chapter',
+                    param: 'Earth'
+                }, {
+                    heading: 'Earth-2',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'none',
+                    isCompleted: true,
+                    type: 'quiz',
+                    url: '/quiz',
+                    param: 'Earth-2'
+                }]
+            }]
+        }, {
+            id: '2',
+            name: 'Mathematics',
+            code: 'MAT',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            },
+            chapterList: [{
+                heading: 'Geometry',
+                isCompleted: false,
+                topics: [{
+                    heading: 'Theorems',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'downloaded',
+                    isCompleted: true,
+                    type: 'video',
+                    url: '/video-chapter',
+                    param: 'Theorems'
+                }, {
+                    heading: 'Triangle',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'none',
+                    isCompleted: true,
+                    type: 'notes',
+                    url: '/chapter-notes',
+                    param: 'Triangle'
+                }, {
+                    heading: 'Quiz',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'none',
+                    isCompleted: false,
+                    type: 'quiz',
+                    url: '/quiz',
+                    param: 'Geometry'
+                }]
+            }, {
+                heading: 'Algebra',
+                isCompleted: true,
+                topics: [{
+                    heading: 'Graph',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'none',
+                    isCompleted: true,
+                    type: 'video',
+                    url: '/video-chapter',
+                    param: 'Graph'
+                }, {
+                    heading: 'Quiz',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'none',
+                    isCompleted: true,
+                    type: 'quiz',
+                    url: '/quiz',
+                    param: 'Graph'
+                }]
+            }]
+        }]
+    }, {
+        classLevel: '8',
+        courses: [{
+            id: '1',
+            name: 'Environmental Studies',
+            code: 'EVS',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            },
+            chapterList: [{
+                heading: 'History',
+                isCompleted: false,
+                topics: [{
+                    heading: 'World War 1',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'downloaded',
+                    isCompleted: true,
+                    type: 'video',
+                    url: '/video-chapter',
+                    param: 'World War 1'
+                }, {
+                    heading: 'World War 2',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'none',
+                    isCompleted: true,
+                    type: 'notes',
+                    url: '/chapter-notes',
+                    param: 'World War 3'
+                }, {
+                    heading: 'Quiz',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    mediaState: 'none',
+                    isCompleted: false,
+                    type: 'quiz',
+                    url: '/quiz',
+                    param: 'History'
+                }]
+            }]
+        }]
+    }];
+
     studentClassList = [{
         date: moment(new Date()).format('MMM, DD 2020'),
         classes: [{

src/app/tabs/courses/course-details/course-details.component.html

@@ -1,10 +1,10 @@
-<div class="page">
+<div class="page" *ngIf="chapterList">
     <section class="upfold">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
         </button>
 
-        <h3> {{ heading }} </h3>
+        <h3> {{ classLevel }} Std, {{ heading }} </h3>
         <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             Earum rerum itaque, autem voluptatibus, quia, consectetur quasi blanditiis.
         </p>
@@ -13,7 +13,7 @@
 
     <div class="progress-holder"> <span class="progress"></span> </div>
 
-    <header class="segment-header">
+    <header class="segment-header" [ngClass]="{'hide-grades' : demoType === 'Teacher'}">
         <button (click)="selectedSegment='home'"
         [ngClass]="{'active': selectedSegment === 'home' }"> Chapters </button>
         <button (click)="selectedSegment='resources'"
@@ -26,7 +26,7 @@
 
     <div class="segments-holder">
         <ul class="chapter-list" *ngIf="selectedSegment === 'home'">
-            <section class="test-prompt">
+            <section class="test-prompt" *ngIf="demoType === 'Student'">
                 <section class="prompt">
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam.
@@ -79,6 +79,10 @@
                         </div>
                     </li>
                 </ul>
+                <div class="chapter-action-buttons" *ngIf="demoType === 'Teacher'">
+                    <button> Add </button>
+                    <button> Edit </button>
+                </div>
             </li>
 
             <div class="confirmation-popup" [ngClass]="{'active' : showDeletePopup }">

src/app/tabs/courses/course-details/course-details.component.scss

@@ -68,6 +68,16 @@
     height: 50px;
     box-shadow: 0px 0px 5px var(--black);
 
+    &.hide-grades {
+        button {
+            width: calc(100% / 3);
+
+            &:nth-child(3) {
+                display: none;
+            }
+        }
+    }
+
     button {
         font-size: 14px;
         width: calc(100% / 4);
@@ -113,6 +123,30 @@
     list-style: none;
 
     .chapter {
+
+        .chapter-action-buttons {
+            display: none;
+            align-items: stretch;
+            width: 100%;
+            justify-content: space-around;
+            padding: 10px 0;
+
+            button {
+                width: 48%;
+                border-radius: 5px;
+                height: 35px;
+                font-size: 14px;
+                color: var(--light-grey);
+                border: 1px solid var(--light-grey);
+                background-color: transparent;
+
+                &:first-child {
+                    border-color: var(--teal-green);
+                    color: var(--teal-green);
+                }
+            }
+        }
+
         &.completed {
             .checkmark {
                 fill: var(--green);
@@ -120,6 +154,10 @@
         }
 
         &.active {
+            .chapter-action-buttons {
+                display: flex;
+            }
+
             .container {
                 position: sticky;
                 position: -webkit-sticky;

src/app/tabs/courses/course-details/course-details.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { Location } from '@angular/common';
+import { DemoService } from '../../../services/demo.service';
 
 @Component({
 	selector: 'app-course-details',
@@ -16,65 +17,39 @@ export class CourseDetailsComponent implements OnInit {
     showDeletePopup: boolean = false;
     isSubSegment: boolean = true;
     selectedTopic: number;
+    classLevel: string;
 
-    chapterList = [{
-        heading: 'Chapter 1',
-        isCompleted: false,
-        topics: [{
-            heading: 'Living Things',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-            mediaState: 'downloaded',
-            isCompleted: true,
-            type: 'video',
-            url: '/video-chapter',
-            param: 'Living Things'
-        }, {
-            heading: 'Living Things-1',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-            mediaState: 'none',
-            isCompleted: true,
-            type: 'notes',
-            url: '/chapter-notes',
-            param: 'Living Things-1'
-        }, {
-            heading: 'Living Things-2',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-            mediaState: 'none',
-            isCompleted: false,
-            type: 'quiz',
-            url: '/quiz',
-            param: 'Living Things-2'
-        }]
-    }, {
-        heading: 'Chapter 2',
-        isCompleted: true,
-        topics: [{
-            heading: 'Earth',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-            mediaState: 'none',
-            isCompleted: true,
-            type: 'video',
-            url: '/video-chapter',
-            param: 'Earth'
-        }, {
-            heading: 'Earth-2',
-            description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-            mediaState: 'none',
-            isCompleted: true,
-            type: 'quiz',
-            url: '/quiz',
-            param: 'Earth-2'
-        }]
-    }];
+    demoTypeSubscriber: Subscription;
+    demoType: string;
+
+    chapterList = [];
 
     constructor(
         private route: ActivatedRoute,
-        private location: Location
+        private location: Location,
+        private demoService: DemoService
     ) { }
 
     ngOnInit(): void {
+        let classLevel: string, courseId: string;
         this.routeSubscription = this.route.params.subscribe((params) => {
-            this.heading = params['heading'];
+            classLevel = params['classLevel'];
+            this.classLevel = classLevel;
+            courseId = params['courseId'];
+        });
+
+        this.demoTypeSubscriber = this.demoService.demoType.subscribe((type) => {
+            this.demoType = type;
+
+            let courseData = this.demoService.courseData;
+
+            let course = courseData.find((courseClass) => courseClass.classLevel === classLevel).courses.find((course) => course.id === courseId);
+
+            this.heading = course.name;
+
+            this.chapterList = course.chapterList;
+
+            console.log(this.chapterList);
         });
     }
 

src/app/tabs/courses/courses.component.html

@@ -1,52 +1,28 @@
-<header> Main Courses: </header>
-<ul>
-    <li>
-        <h2> ENG </h2>
-
-        <div class="details" [routerLink]="['/course-details/English']">
-            <h5> Chapter: 21 </h5>
-            <p> 50% complete </p>
-            <div class="progress-holder"> <span class="progress"></span> </div>
-        </div>
-    </li>
-
-    <li [routerLink]="['/course-details/Kannada']">
-        <h2> KAN </h2>
-
-        <div class="details">
-            <h5> Chapter: 21 </h5>
-            <p> 50% complete </p>
-            <div class="progress-holder"> <span class="progress"></span> </div>
-        </div>
-    </li>
-
-    <li [routerLink]="['/course-details/Biology']">
-        <h2> BIO </h2>
-
-        <div class="details">
-            <h5> Chapter: 21 </h5>
-            <p> 50% complete </p>
-            <div class="progress-holder"> <span class="progress"></span> </div>
-        </div>
-    </li>
-
-    <li [routerLink]="['/course-details/Physics']">
-        <h2> PHY </h2>
-
-        <div class="details">
-            <h5> Chapter: 21 </h5>
-            <p> 50% complete </p>
-            <div class="progress-holder"> <span class="progress"></span> </div>
-        </div>
-    </li>
-
-    <li [routerLink]="['/course-details/Chemistry']">
-        <h2> CHEM </h2>
-
-        <div class="details">
-            <h5> Chapter: 21 </h5>
-            <p> 50% complete </p>
-            <div class="progress-holder"> <span class="progress"></span> </div>
-        </div>
-    </li>
-</ul>
+<header> {{ demoType }} Courses: </header>
+<section *ngIf="demoType === 'Teacher'">
+    <ul *ngFor="let class of classCourseList">
+        <li *ngFor="let course of class.courses">
+            <h2> {{ course.code }} </h2>
+
+            <div class="details" (click)="goToCourse(class.classLevel, course.id)">
+                <h5> Class: {{ class.classLevel }} <br> {{ course.chapterList.length }} chapters </h5>
+                <p> 50% complete </p>
+                <div class="progress-holder"> <span class="progress"></span> </div>
+            </div>
+        </li>
+    </ul>
+</section>
+
+<section *ngIf="demoType === 'Student'">
+    <ul *ngFor="let class of classCourseList">
+        <li *ngFor="let course of class.courses">
+            <h2> {{ course.code }} </h2>
+
+            <div class="details" (click)="goToCourse(class.classLevel, course.id)">
+                <h5> {{ course.chapterList.length }} chapters </h5>
+                <p> 50% complete </p>
+                <div class="progress-holder"> <span class="progress"></span> </div>
+            </div>
+        </li>
+    </ul>
+</section>

src/app/tabs/courses/courses.component.ts

@@ -1,15 +1,42 @@
 import { Component, OnInit } from '@angular/core';
+import { DemoService } from '../../services/demo.service';
+import { Subscription } from 'rxjs';
+import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-courses',
-  templateUrl: './courses.component.html',
-  styleUrls: ['./courses.component.scss']
+	selector: 'app-courses',
+	templateUrl: './courses.component.html',
+	styleUrls: ['./courses.component.scss']
 })
 export class CoursesComponent implements OnInit {
+    demoTypeSubscriber: Subscription;
+    demoType: string;
+    classCourseList = [];
 
-  constructor() { }
+	constructor(
+        private demoService: DemoService,
+        private router: Router
+    ) { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+        this.demoTypeSubscriber = this.demoService.demoType.subscribe((type) => {
+            this.demoType = type;
+            if (type === 'Student') {
+                this.classCourseList = this.demoService.courseData;
+                this.classCourseList = this.classCourseList.filter((courseClass) => {
+                    return courseClass.level === '10';
+                })
+            } else {
+                this.classCourseList = this.demoService.courseData;
+            }
+        });
+	}
+
+    goToCourse(classLevel: string, courseId: string) {
+        this.router.navigate(['/course-details', {
+            classLevel: classLevel,
+            courseId: courseId
+        }])
+    }
 
 }

src/app/tabs/home/home.component.ts

@@ -37,7 +37,7 @@ export class HomeComponent implements OnInit {
             }
 
             if (type === 'Teacher') {
-                this.classList = this.demoService.teacherClassList;                
+                this.classList = this.demoService.teacherClassList;
             }
         });
 	}
@@ -58,4 +58,8 @@ export class HomeComponent implements OnInit {
         }
 	}
 
+    ngOnDestroy() {
+        this.demoTypeSubscriber.unsubscribe();
+    }
+
 }

src/app/tabs/tabs.component.ts

@@ -12,7 +12,7 @@ export class TabsComponent implements OnInit {
     routeSubscription: Subscription;
 
 	constructor(
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
     ) { }
 
 	ngOnInit(): void {