Angular : parent function not called when child emits

Question

I have seen a lot of topics related to this problem but have not found an answer. So here is my topic :

I want to pass data from my child component to my parent component with EventEmitter.emit(value).

The problem is that my emitter does not emit any data (undefined) when I console.log it. Also, the Parent function is not called when the data is emitted.

I have tried :

• Changing the type of the data to string : not working
• Changing the imports to '@angular/core' : but was already from '@angular/core'
• Changing $event to $event.value in the Parent HTML : the event should be a "Movies"|"TV Shows" so not working

I did everything according to the Angular doc and precedent topics but I do not see what I did wrong.

Thanks to repond and for your time.

Child component HTML

<div class="switch-menu">
        <button class="switch-btn" (click)="toggleMovies($event)" [ngClass]="this.showingMovies == 'Movies' ? 'active-button':''" value="Movies">Movies</button>
        <button class="switch-btn" (click)="toggleMovies($event)" [ngClass]="this.showingMovies == 'TV Shows' ? 'active-button':''" value="TV Shows">TV Shows</button>
    </div>

Child component TS

@Output() eshowingMovies: EventEmitter<string> = new EventEmitter();
showingMovies: "Movies"|"TV Shows" = "Movies";

toggleMovies(_ev: Event): void{
    if (this.showingMovies !== (_ev.target as HTMLInputElement).value){
      this.showingMovies = this.showingMovies == "Movies" ? "TV Shows" : "Movies";
      this.eshowingMovies.emit(this.showingMovies);
    }
  }

Parent component HTML

<app-movie-list-find (eshowingMovies)="toggleMovies($event)" ></app-movie-list-find>
<app-show-list-find (eshowingMovies)="toggleMovies($event)" ></app-show-list-find>

I have this error message in the Parent html file

The event should be a "Movies"|"TV Shows" type but is an Event.

(parameter) $event: Event
Argument of type 'Event' is not assignable to parameter of type '"Movies" | "TV Shows"'.
  Type 'Event' is not assignable to type '"TV Shows"'.ngtsc(2345)
find.component.ts(4, 20): Error occurs in the template of component FindComponent.

Parent component TS

showingMovies: "Movies"|"TV Shows" = "Movies";

toggleMovies(event: "Movies"|"TV Shows"): void{
    if (this.showingMovies !== event){
      this.showingMovies = event;
    }
  }

Answer 1

it's unclear to me what exactly you tried to achieve with your current implementation but I don't see a reason to pass the event itself in your child when a button is clicked. you can instead do the following:

<div class="switch-menu">
        <button class="switch-btn" (click)="toggleMovies('Movies')" [ngClass]="this.showingMovies == 'Movies' ? 'active-button':''" value="Movies">Movies</button>
        <button class="switch-btn" (click)="toggleMovies('TV Shows')" [ngClass]="this.showingMovies == 'TV Shows' ? 'active-button':''" value="TV Shows">TV Shows</button>
    </div>

then in your child function which emits the value -

toggleMovies(category: "Movies" | "TV Shows"): void {
      this.eshowingMovies.emit(category);
    }
  }

that should solve your issue