import { Component, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material'; import { SignInDialogComponent } from '@common/modules/sign-in-dialog/sign-in-dialog.component'; @Component({ selector: 'app-guest-component', templateUrl: './guest.component.html', styleUrls: ['./guest.component.scss'] }) export class GuestComponent implements OnInit { constructor(public dialog: MatDialog) { } ngOnInit() { this.navbarCollapse(); window.addEventListener('scroll', this.scroll, true); } ngOnDestroy() { window.removeEventListener('scroll', this.scroll, true); } public toggleClass(ids, option) { ids.forEach(id => { var element = document.getElementById(id); var className = element.getAttribute("class").replace(/ .*/, ''); console.log(className); if (id === option) { element.classList.replace(className, "selected"); } else { element.classList.replace(className, "not-selected"); } }) } public navbarCollapse() { var element = document.getElementById('nav'); if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { element.classList.add("navbar-shrink"); element.classList.add("fixed-top"); } else { element.classList.remove("navbar-shrink"); element.classList.remove("fixed-top"); } }; scroll = (event): void => { this.navbarCollapse(); }; public openSignInDialog(): void { const dialogRef = this.dialog.open(SignInDialogComponent); dialogRef.afterClosed().subscribe(result => { }); } }