CODEWITHSUNDEEP
angulareventemitter
Rinma
Rinma

Reputation: 474

Angular EventEmitter observer does not get called

I set up a small part of my project, which I'm struggling with: https://stackblitz.com/edit/angular-ivy-ee7v5t

If the link gets invalid, here the least amount of code to understand the problem:

options.component.html

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

@Component({
  selector: 'app-options',
  templateUrl: './options.component.html',
  ...
})
export class OptionsComponent implements OnInit {
  country: any;

  ...

  receiveCountry(country: any) {
    this.country = country;
    console.log("2");
  }
}

options.component.html

<app-country-selector (countrySelectedEvent)="receiveCountry($event)"></app-country-selector>

country-selector.component.ts

@Component({
  selector: 'app-country-selector',
  ...
})
export class CountrySelectorComponent implements OnInit {
   @Output() countrySelectedEvent: EventEmitter<any> = new EventEmitter();

...

  onOptionSelected($event) { //gets called by angular material autocomplete
    let selectedCountry = this.countries.find(c => c.name.toLowerCase() == $event.option.value.toLowerCase());
    this.countrySelectedEvent.emit(selectedCountry);
    console.log("1");
  }
}

I want the options.component to get called when in the country-selector.component a value in the autocompletion is selected. I want to achieve this by using the EventEmitter, and did connected the functions in the html part of the code according to the angular documentation.

I added two console.logs but only see one, the other part that's confusing me is that the EventEmitter object has no observers in his arrays.

Everything should be correct but something is off and I can't figure out what.

Upvotes: 0

Views: 1598

Answers (1)

Marcin Kot
Marcin Kot

Reputation: 126

According to your stackblitz, remove CountrySelectorComponent from bootstrap section in app.module.ts.

You should put all common components into declarations section

bootstrap—the root component that Angular creates and inserts into the index.html host web page.

Upvotes: 1

Related Questions