Home > Enterprise >  How to resolve Event Emitter issue in angular
How to resolve Event Emitter issue in angular

Time:09-08

In my code event emitter is not working. So, How to call event emitter inside testing component. If any one knows please help to resolve this issue.

autocomplete-overview-example.ts:

  ngAfterViewInit() {
  this.trigger.autocomplete.closed.subscribe(e => {
  console.log('emitted');
  this.closevent.emit();
 }) 
 }

testing.component.ts:

  callCloseEvent() {
    alert('success');
  }

Demo: https://stackblitz.com/edit/angular-3z5tqr-gbnbze?file=app/testing/testing.component.ts

CodePudding user response:

UPDATE

The issue was further due to the configuration of the appModule in the stackblitz

Before:

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [TestingComponent],
  declarations: [AutocompleteOverviewExample, TestingComponent],
  bootstrap: [AutocompleteOverviewExample],
  providers: []
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

After:

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
    DemoMaterialModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
  entryComponents: [],
  declarations: [TestingComponent, AutocompleteOverviewExample],
  bootstrap: [TestingComponent],
  providers: [],
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

autocomplete-overview-example.ts

@Output() closeevent = new EventEmitter(); //<-       typo



 ngAfterViewInit() {
    this.trigger.autocomplete.closed.subscribe(e => {
      console.log('emitted');
      this.closeevent.emit(); // <------------------------typo
    })

 }

in html it says closeevent but in the calling component it says closevent

forked stackblitz

  • Related