app.component.ts

import { DataService } from './core/data.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SidenavService } from './core/service/sidenav.service';
import { Component, ViewChild, OnInit } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { ActivatedRoute } from '@angular/router';
import { DegreePlannerDataService } from './core/service/degree-planner-data.service';
import { Observable } from 'rxjs';
import { debounceTime, switchMap, tap } from 'rxjs/operators';
import { MatDialog } from '@angular/material';
import { CourseDetailsDialogComponent } from './degree-planner/dialogs/course-details-dialog/course-details-dialog.component';
import { ErrorStateMatcher } from '@angular/material/core';
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';

@Component({
    selector: 'cse-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
    coursesData$: any;
    selectedDegreePlan: number;
    courses: Observable<any>;
    coursesForm: FormGroup;
    coursesInput: any;

    @ViewChild('rightAddCourse') public rightAddCourse: MatSidenav;
    constructor(
        public dialog: MatDialog,
        private dataService: DataService,
        private route: ActivatedRoute,
        private sidenavService: SidenavService,
        private degreePlannerDataSvc: DegreePlannerDataService,
        private fb: FormBuilder) {
            this.coursesInput = new FormControl('', [Validators.required]);
            this.selectedDegreePlan = 520224;
            this.coursesData$ = this.degreePlannerDataSvc.getDegreePlanDataById(this.selectedDegreePlan);
    }

    ngOnInit() {
        this.sidenavService.setSidenav(this.rightAddCourse);
        this.coursesForm = this.fb.group({
                coursesInput: null
        });
        this.courses = this.coursesForm.get('coursesInput').valueChanges
            .pipe(
                debounceTime(300),
                switchMap(value => this.dataService.autocomplete(value)),
                tap(x => console.log( x))
            );
    }

    openCourseDetailsDialog(course) {
        this.dataService.getCourseDetails(course.termCode, course.payload.subject.subjectCode, course.payload.courseId)
        .subscribe(courseDetails => {
            const dialogRef = this.dialog.open(CourseDetailsDialogComponent, {
                data: { courseDetails: courseDetails }
            });
        });
    }

}

}
document.addEventListener('WebComponentsReady', function() {
    const customEvent = new CustomEvent('myuw-login', {
        detail: {
            person: {
            // 'firstName': 'Bucky'
            }
        }
    });
    document.dispatchEvent(customEvent);
});