CODEWITHSUNDEEP
angularangular5angular-event-emitter
Prabakaran V
Prabakaran V

Reputation: 233

Angular 5 event emitter triggered twice

I am using angular 5. In which I am passing data from one component to another component using eventemitter.

At first click event emitter is not subscribe the value in child component. On second click event emitter triggered twice.

Header component.ts

 this.testservice.sendsearchdata.next( this.searchdataform.value)

Search component.ts

this.testservice.sendsearchdata.subscribe(value=>{ 
    console.log( value)
})

testservice.ts

  public testservice: EventEmitter<any> = new EventEmitter ():

While passing reactive form data from header component to search component it's not triggered at first click. On next click it has triggered twice.

Upvotes: 3

Views: 8880

Answers (3)

spec
spec

Reputation: 439

if you do not specify any type (or type="submit") in a form it causes double EventEmitter instead single so you must specify type="button" like:

 <button type="button" (click)="emitMe()">
 </button>

Upvotes: 0

Ryan Palmer
Ryan Palmer

Reputation: 119

My event emitter was bound to button click event. <button class="signin-button btn-primary btn" (click)="submit()">Create Account</button>

By switching the button input to an a tag. <a class="signin-button btn-primary btn" (click)="submit()">Create Account</a>

It stopped triggering more than one event.

Upvotes: 0

Yerkon
Yerkon

Reputation: 4788

I think you are incorrectly using EventEmitter. It's used when child component emitting events to parent component via @Output() property. In your case, component communication realized by using service. Try this way: 

@Injectable()
export class MissionService {

  // Observable string sources
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();

  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();

  // Service message commands
  announceMission(mission: string) {
    this.missionAnnouncedSource.next(mission);
  }

  confirmMission(astronaut: string) {
    this.missionConfirmedSource.next(astronaut);
  }
}

Parent and children communicate via a service

Upvotes: 3

Related Questions