bug: I cannot call custom Stencil Events in Angular 15 projects

[jokova]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

3.0.0

Current Behavior

I am using StencilJS v3.0, and my Angular version is 15.1.3. In my local Angular app (v15), I am trying to use the components I have created, and everything seems fine except for the event names.

I have followed the StencilJS instructions to publish the Angular components, but it is not working properly. The error message I am receiving is:

ERROR
src/app/app.component.html:54:13 - error TS2339: Property 'subscribe' does not exist on type 'EventEmitter'. (toggleMenu)="toggleState()"

My Angular code:
```
import { Component, HostListener } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 openState: boolean = false;

 toggleState() {
   this.openState = !this.openState;
 }
}

```

And a part of the HTML:
```
      <my-navbar-menu-item>
         <my-dropdown-menu
           navbar-menu-dropdown
           (toggleMenu)="toggleState()"
           [open]="openState"
           multi-level-dropdown="true"
           >
         <my-dropdown-trigger slot="trigger">
           <p slot="trigger-title">Page 1</p>
         </my-dropdown-trigger>
```

My Angular main.ts file:

```
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';
import { defineCustomElements } from '@my-component-library/loader';

defineCustomElements();
console.log('test');


enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err => console.error(err));
```

And part of the Stencil Dropdown Menu component:

```
import { Component, h, Listen, Element, Prop, EventEmitter, Event, Host, Watch } from '@stencil/core';

@Component({
 tag: 'my-dropdown-menu',
 shadow: true,
 styleUrl: 'my-dropdown-menu.scss'
})
export class MyDropdownMenu {
 dropdownRef: HTMLElement;

 /**
  * The open state of the menu. Defaults to false;
  */
 @Prop({ mutable: true }) open = false;

 /**
  * Whether the dropdown is disabled.
  */
 @Prop() disabled: boolean = false;

 /**
  * Fired when the menu is toggled. Emits the open state of the menu.
  */
 @Event() toggleMenu: EventEmitter;

...... more code .....

@Listen('_triggerMenu')
 triggerMenu(event) {
    ...... more code .....

   return this.toggleMenu.emit(event);
 }
...... more code .....
```


### Expected Behavior

I would like to be able to call any custom events like (toggleMenu) in an Angular 15 project

### System Info

```shell
Windows, MS Edge, Chrome, Stencil v3.0

About Angular:
  "@angular/animations": "^15.1.3",
   "@angular/common": "^15.1.3",
   "@angular/compiler": "^15.1.3",
   "@angular/core": "^15.1.3",
   "@angular/forms": "^15.1.3",
   "@angular/platform-browser": "^15.1.3",
   "@angular/platform-browser-dynamic": "^15.1.3",
   "@angular/router": "^15.1.3",
```


### Steps to Reproduce

Build a custom Angular Project v15+ and try to call a custom event of a custom Stencil Component

### Code Reproduction URL

-

### Additional Information

_No response_

[alicewriteswrongs]

Hey @jokova, thanks for filing this issue and sorry you're having trouble with Stencil.

If you wouldn't mind do you think you could create a minimal reproduction case for the issue you're experiencing and link to it? You could do this by creating a new Stencil project using npm init stencil and then pushing that to a new Github repo or by using a service like StackBlitz. Either way it greatly helps us to diagnose and then fix issues if we have a reliable way to reproduce them!

Thanks! 🙂

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!