app.component.ts

import { SidenavService } from './core/service/sidenav.service';
import { DataService } from './core/data.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 { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'cse-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  @ViewChild('rightAddCourse') public rightAddCourse: MatSidenav;
  constructor(private sidenavService: SidenavService) {}

  ngOnInit() {
    this.sidenavService.setSidenav(this.rightAddCourse);
  }
	coursesData$: any;
	selectedDegreePlan: number;

	@ViewChild('rightAddCourse') public rightAddCourse: MatSidenav;
	constructor(
		private dataService: DataService,
		private route: ActivatedRoute,
		private sidenavService: SidenavService,
		private degreePlannerDataSvc: DegreePlannerDataService) {
		this.selectedDegreePlan = 520224;
		this.coursesData$ = this.degreePlannerDataSvc.getDegreePlanDataById(this.selectedDegreePlan);
	}

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

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