EMahan K
EMahan K

Reputation: 467

How to resolve Event Emitter issue in angular

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%2Ftesting%2Ftesting.component.ts

Upvotes: 1

Views: 135

Answers (1)

Naren Murali
Naren Murali

Reputation: 56052

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

Upvotes: 2

Related Questions