app.component.ts

import { Component, ViewChild, OnInit } from '@angular/core';
import { MatSidenav, MatDialog } from '@angular/material';
import { Profile } from '@app/core/models/profile';
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 { Store } from '@ngrx/store';
import { GlobalState } from './core/state';
import { Initialize } from './core/actions';

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

  constructor(
    public dialog: MatDialog,
    private fb: FormBuilder,
    private api: DegreePlannerApiService,
    private store: Store<GlobalState>,
  ) {
    this.subjectCode = new FormControl('', [Validators.required]);
    this.coursesForm = this.fb.group({
      coursesInput: null,
    });
  }

  ngOnInit() {
    this.store.dispatch(new Initialize());

    this.api.getUserProfile().subscribe(profile => {
      const customEvent = new CustomEvent('myuw-login', {
        detail: {
          person: {
            firstName: profile.firstName,
          },
        },
      });
      document.dispatchEvent(customEvent);
    });
  }
}