app.component.ts

import { DegreePlannerApiService } from './degree-planner/services/api.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 { 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 = {};
    @ViewChild('rightAddCourse') public rightAddCourse: MatSidenav;

    constructor(
        public dialog: MatDialog,
        private route: ActivatedRoute,
        private sidenavService: SidenavService,
        private fb: FormBuilder,
        private api: DegreePlannerApiService) {
            this.coursesInput = new FormControl('', [Validators.required]);
            this.selectedDegreePlan = 520224;
            this.coursesForm = this.fb.group({
                coursesInput: null
            });
            // Uncomment following code when working on Course Search form in +Add Course
            // It will need to be modified to fix error: TS2531: Object is possibly 'null'
            // this.courses = this.coursesForm.get('coursesInput').valueChanges
            // .pipe(
            //     debounceTime(300),
            //     switchMap(value => this.api.autocomplete(value)),
            //     tap(x => console.log( x))
            // );
    }

    ngOnInit() {
        this.sidenavService.setSidenav(this.rightAddCourse);
    }

    openCourseDetailsDialog(course) {
        this.api.getCourseDetails(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);
});