CODEWITHSUNDEEP
angular
Snehanka Roy
Snehanka Roy

Reputation: 1

Angular EventEmitter not emitting event

I have Angular vertical stepper(angular material) where each step is a separate component and there is a parent component where I am calling all these components. I am trying to pass data between the parent and child components. There is an @Output EventEmitter event in the child component that is getting called but the function in the parent component is not getting called.

Note: The EventEmitter event is actually inside a subscribe method.

Child Component ts file:

@Output() sampleEvent: EventEmitter = new EventEmitter();

sampleFunction (){
    this.someService.someMethod.subscribe((data) => {
           this.sampleEvent.emit(data);
           // some other functions are there like console.log and 
           //  snackbar message which are getting called
    })
    
}

Parent Component html file:

<child-component (sampleEvent)=parentFunction($event)></child-component>

Parent Component ts file:

@ViewChild(ChildComponent) child: ChildComponent; 

parentFunction(data) {
   
   console.log(data); //not getting called
}

funtionABC() {
   this.anotherFunction();
}

anotherFunction() {
  this.child.sampleFunction();
}

Upvotes: 0

Views: 485

Answers (1)

SehaxX
SehaxX

Reputation: 764

You are not triggering the event. You have set up this function, but there is no call to it.

anotherFunction() {
  this.child.sampleFunction();
}

You can setup a button on Parent, and on click call it. And probably Angular vertical stepper has some other trigger that will execute the event so no button will be needed.

<button (click)=anotherFunction()>Trigger</button>

Here you have an stackblitz demo, if it is not working for you, can you please provide a demo for better understanding of the issue. StackBlitz Demo

Upvotes: 0

Related Questions