Can't bind to 'onToggleSideBar' since it isn't a known property of 'app-header'

I am getting an error when trying to use an emitted value in my code. The error says that the component may not be imported however I can see that it is. The error only shows when I add the emitter.

Here is my code

default.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DefaultComponent } from './default.component';
import { DashboardComponent } from 'src/app/modules/dashboard/dashboard.component';
import { RouterModule } from '@angular/router';
import { PostsComponent } from 'src/app/modules/posts/posts.component';
import { SharedModule } from 'src/app/shared/shared.module';
import { MaterialModule } from 'src/app/material.module';
    
@NgModule({
  declarations: [
    DefaultComponent,
    DashboardComponent,
    PostsComponent,
  ],
  imports: [
    CommonModule,
    RouterModule,
    SharedModule,
    MaterialModule
  ]
})
export class DefaultModule { }

default.component.html

<app-header [onToggleSideBar]="sideBarToggler($event)"></app-header>

<mat-drawer-container>
  <mat-drawer mode="side" [opened]="sideBarOpen">
    <app-sidebar></app-sidebar>
  </mat-drawer>
  <mat-drawer-content>
    <router-outlet></router-outlet>
  </mat-drawer-content>
</mat-drawer-container>

<app-footer></app-footer>

default.compnent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-default',
  templateUrl: './default.component.html',
  styleUrls: ['./default.component.css']
})
export class DefaultComponent implements OnInit {

  public sideBarOpen: boolean = false;

  constructor() { }

  ngOnInit(): void {
  }

  sideBarToggler() {
    this.sideBarOpen = !this.sideBarOpen;
  }

}

header.component.html

<p>
  <mat-toolbar color="primary">
    <button mat-icon-button (click)="toggleSideBar()">
      <mat-icon>menu</mat-icon>
    </button>
    <span>APP LOGO</span>
    <span class="spacer"></span>
    <button mat-icon-button>
      <mat-icon>settings</mat-icon>
    </button>
    <button mat-icon-button>
      <mat-icon>help_outline</mat-icon>
    </button>
    <button mat-button [matMenuTriggerFor]="menu">
      <mat-icon>person_outline</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>
        <mat-icon>exit_to_app</mat-icon>Sign out
      </button>
    </mat-menu>
  </mat-toolbar>
</p>

header.component.ts

import { Component, EventEmitter, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  @Output() onToggleSideBar: EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit(): void {
  }

  toggleSideBar() {
    this.onToggleSideBar.emit();
  }

}

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterComponent } from './components/footer/footer.component';
import { SidebarComponent } from './components/sidebar/sidebar.component';
import { HeaderComponent } from './components/header/header.component';
import { MaterialModule } from '../material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    HeaderComponent,
    SidebarComponent,
    FooterComponent
  ],
  imports: [
    CommonModule,
    MaterialModule,
    FlexLayoutModule,
    RouterModule
  ],
  exports: [
    HeaderComponent,
    SidebarComponent,
    FooterComponent
  ]
})
export class SharedModule { }

So my shared module which contains my header component is imported into the default module.

Does anyone know why I get the error in default.component.html on this line?

<app-header [onToggleSideBar]="sideBarToggler($event)"></app-header>

>Solution :

You are using @Output() onToggleSideBar in which case the html would use parentheses, so it would look like this (you are using brackets):

<app-header (onToggleSideBar)="sideBarToggler($event)"></app-header>