My dilemma involves two components with straightforward output events and handlers. I am attempting to pass a value from a child submodule to a component within my app.module. Here is the snippet of code from my app.component.ts:
@Component({
selector: 'my-app',
template: `
<sidebar *ngIf="showHeader" (everySecond)="everySecond()" ></sidebar>
<navbar *ngIf="showHeader" (toggleNav)="toggleNav($event)"></navbar>
<router-outlet></router-outlet>`,
directives: [homeComponent, sidebarComponent, navbarComponent]
})
export class AppComponent {
everySecond() { console.log('second'); }
}
The issue arises in my app.module.ts where I import tutorialModule containing the tutorial component below.
export class tutorialComponent {
@Output() everySecond = new EventEmitter();
constructor() {
this.everySecond.emit("event");
console.log("here");
}
}
Upon navigating to the tutorialComponent, only the "here2 log is printed out while the "second" event is not triggered. It seems that the tutorialComponent is not declared as a directive of the app.component due to being imported as a module. How can I resolve this issue?