The company bought a template to implement a menu, but clicking the menu button is giving this error in the console:
FullComponent.html:34 ERROR TypeError: Cannot read property 'toggle' of undefined at Object.eval [as handleEvent] (FullComponent.html:34) at handleEvent (core.js:13547) at callWithDebugContext (core.js:15056) at Object.debugHandleEvent [as handleEvent] (core.js:14643) at dispatchEvent (core.js:9962) at eval (core.js:10587) at HTMLButtonElement.eval (platform-browser.js:2628) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.invokeTask (zone.js:420)
Line 34 of the FullComponent.html file looks like this:
<button mat-icon-button (click)="snav.toggle()" value="sidebarclosed">
<mat-icon>menu</mat-icon>
</button>
I understand that I did what is in the original file, but something is missing that I do not know, because when I run the template we buy works normally.
The template we bought is this: link
When I search on what we buy, there is only one, as shown in the attached image.
TypeScript
import * as $ from 'jquery';
import { MediaMatcher } from '@angular/cdk/layout';
import { Router } from '@angular/router';
import { ChangeDetectorRef, Component, NgZone, OnDestroy, ViewChild, HostListener, Directive, AfterViewInit } from '@angular/core';
import { MenuItems } from '../../shared/menu-items/menu-items';
import { AppHeaderComponent } from './header/header.component';
import { AppSidebarComponent } from './sidebar/sidebar.component';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
/** @title Responsive sidenav */
@Component({
selector: 'app-full-layout',
templateUrl: 'full.component.html',
styleUrls: [],
})
export class FullComponent implements OnDestroy, AfterViewInit {
mobileQuery: MediaQueryList;
dir = 'ltr';
green: boolean;
blue: boolean = true;
dark: boolean;
minisidebar: boolean;
boxed: boolean;
danger: boolean;
showHide:boolean;
sidebarOpened;
public config: PerfectScrollbarConfigInterface = {};
private _mobileQueryListener: () => void;
constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, public menuItems: MenuItems) {
this.mobileQuery = media.matchMedia('(min-width: 768px)');
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
this.mobileQuery.addListener(this._mobileQueryListener);
}
ngOnDestroy(): void {
this.mobileQuery.removeListener(this._mobileQueryListener);
}
ngAfterViewInit() {
//This is for the topbar search
(<any>$(".srh-btn, .cl-srh-btn")).on('click', function () {
(<any>$(".app-search")).toggle(200);
});
//This is for the megamenu
}
// Mini sidebar
}