Angular 9: Why is my custom EventEmitter not working?

Question

I've been trying out Angular 9 and have been stuck on the correct use of the @Output() -decorator and the EventEmitter -class for a while now. For some reason, my event does not seem to be bubbled up to my child component's immediate parent component. My child component is called NavbarComponent and is supposed to fire the toggletool -event on a button click. The relevant parts of the navbar.component.ts -file look like this:

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

  @Output('toggletool') toggleEvent: EventEmitter<string> = new EventEmitter<string>();

  ...

  toggle(id: string) {
    this.toggleEvent.emit(id);
  }

}

The toggle(...) -function is definitely called and the id parameter is set correctly. I'm now trying to catch the event in my AppComponent . The template looks like this:

<app-location-tool [isActive]="toolIsActive('locationtool')" (toggletool)="toggleTool($event)">
</app-location-tool>

The app.component.ts -file declares a function toggleTool(...) that looks like this:

toggleTool(event) {
  console.log(event);
}

However, this function is never called (judging by the missing console output), and I don't really know why. I'm guessing I have overlooked some minor mistake and am hoping that you guys can help me out.

Thank you in advance.

Answer 1

您组件的选择器是app-navbar ，但您使用了app-location-tool