My attempt at creating a basic event emitter doesn't seem to be functioning properly. Here's the code snippet:
Main Component
This is the main app component I have been working on:
@Component({
selector:'my-app',
templateUrl:'app/app.component.html',
styleUrls:['app/app.component.css'],
directives:[ROUTER_DIRECTIVES,MenuBar],
})
export class AppComponent{
title: 'My App'
activated(event: Routes){
console.log('activated');
console.log(received)
}
}
AppComponent.html
<h1>{{title}}</h1>
<menu-bar (activate)="activated($event)"></menu-bar>
<div class="router-wrapper">
<router-outlet></router-outlet>
</div>
Download
@Component({
.... // component configurations....
})
class Download implements OnInit {
... // some attributes and code ...
@Output() activate: EventEmitter <Routes> = new EventEmitter<Routes>();
r: Routes = {};
test(): void {
console.log('emit start')
console.log(this.r);
try {
this.activate.emit(this.r)
} catch(err) {
console.log(err)
}
console.log('sent')
}
}
The download component is placed inside a router-outlet.
Initially, I am able to see all the console log messages from the Download component but not from the app component. Can anyone point out what might be causing this issue?
Additionally, I suspect the problem lies in the event propagation. Is there a way to debug the emitting events globally? If yes, how can it be achieved?