import { SidenavService } from './core/service/sidenav.service'; import { Component, ViewChild, OnInit } from '@angular/core'; import { MatSidenav } from '@angular/material'; @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); } } document.addEventListener('WebComponentsReady', function() { const customEvent = new CustomEvent('myuw-login', { detail: { person: { // 'firstName': 'Bucky' } } }); document.dispatchEvent(customEvent); });