My Angular's Output Event Emitter handler isn't triggered

Question

I'm trying to change a part of my website when someone click on a svg picture. That's why I used EventEmitter : to send the information of which part might be shown.

First, the code of my SVG triggering its own event on a click, and emitting to its parent : `<div (mouseover)="onMouseOver()" (mouseout)="this.onMouseOut()" (click)="onChangePage()"> ...

` Its ts :

...
export class IconTestsComponent extends MenuIconComponent {

  @Output('ChangePage2') ChangePage2 = new EventEmitter<string> ();
  onChangePage() {
    console.log("test")
    this.ChangePage2.emit("tests");
  }

}

its parent is triggered, here's its own code: HTML :


<div style="width: 7%; background-color: dimgray; padding: 1%; height: 100%;">

    <app-icon-tests (ChangePage2)="onChangePage($event)"></app-icon-tests>
    ...

</div>

TS :

export class MenuComponent {
    @Output('ChangePage3') ChangePage = new EventEmitter<string> ();

    onChangePage(new_page: string) {
        console.log("test")
        this.ChangePage.emit("tests");
        console.log("emmited?")
    }
}

this is supposed to be triggered (this works) and emit to parent (this doesn't) : HTML :

<div>
<app-menu (ChangePage3)="onChangePage($event)"></app-menu>
<app-edition-page></app-edition-page>
</div>

TS :

import { Component } from '@angular/core';

@Component({
    selector: 'app-editing-page',
    templateUrl: './editing-page.component.html',
    styleUrls: ['./editing-page.component.scss']
})
export class EditingPageComponent {

    onChangePage(newPage: string) {
        console.log("triggered?")
        console.log(newPage)
    }
  
}

I'm unable to find the solution of this problem, the last one is never triggered... Do you know why please? Thanks in advance

(my console result :)

test       icon-tests.component.ts:13:12
test       menu.component.ts:12:12
emmited?   menu.component.ts:14:12

edit :

I've tried to go through by using a Service whith a method I call which toggles my component with a RXJS Subject. Perhaps, my component still doesn't want to listen anything : My Service's code :

export class ShowingPageManagerService {
  private current_page = '';
  public current_page_sub: Subject<string> = new Subject<string>();
  constructor() { }

  ChangeShownPage (page:string) {
    console.log("it sucks");
    
    this.current_page = page;
    this.current_page_sub.next(this.current_page);
    console.log("still sucking");
  }
}

and here's my component's one :

ngOnInit(){
    (this.shownPageService.current_page_sub).subscribe({
      next: (next_page) => console.log("Eureka!")
      // this.onChangePage(next_page)
    });
  }

I've already try to make ChangeShownPage as async, still not working... Is that possible to my component to be "bugged" or am I just the most unlucky man ?

score 0 · Answer 1 · answered Aug 16 '23 at 17:27

0

In the html you are expecting ChangePage3 but you have no emitter called like that.

export class MenuComponent {
    // Output variable ChangePage should be ChangePage3
    @Output('ChangePage3') ChangePage = new EventEmitter<string> ();

    onChangePage(new_page: string) {
        console.log("test")
        this.ChangePage.emit("tests");
        console.log("emmited?")
    }
}

answered Aug 16 '23 at 17:27

giacomoto

91
4

`@Output ('ChangePage3)` Might change the name for the EventEmitter, isn't it? I also tried with ChangePage, with ChangePage3 it's not compiling (type error, the EventEmitter is't a string type, but an event type, because undefined in my child class) , and without I still have the issue.. – Neost Aug 17 '23 at 06:54

score 0 · Answer 2 · answered Aug 17 '23 at 12:40

0

Alright, was just a little mistake : I forget to change my app-component.html, I never used the parent component, that's why it didn't work.. sorry for that..

answered Aug 17 '23 at 12:40

Neost

1
1

My Angular's Output Event Emitter handler isn't triggered

2 Answers2