app.component.ts

import { Component, ViewChild, OnInit } from '@angular/core';
import { MatSidenav, MatDialog } from '@angular/material';
import { Observable } from 'rxjs';
import {
  FormBuilder,
  FormGroup,
  FormControl,
  Validators,
} from '@angular/forms';
import { Course } from '@app/core/models/course';
import { DegreePlannerApiService } from '@app/degree-planner/services/api.service';
import { CourseDetailsDialogComponent } from '@app/degree-planner/dialogs/course-details-dialog/course-details-dialog.component';

@Component({
  selector: 'cse-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  coursesData$: any;
  selectedDegreePlan: number;
  courses: Course[];
  coursesForm: FormGroup;
  subjectCode: FormControl;
  @ViewChild('rightAddCourse') public rightAddCourse: MatSidenav;

  constructor(
    public dialog: MatDialog,
    private fb: FormBuilder,
    private api: DegreePlannerApiService,
  ) {
    this.subjectCode = 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() {}

  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);
});