Issue
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>
Answered By - Get Off My Lawn
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.