Arter
Arter

Reputation: 2324

Call function from another component not working with EventEmitter()

I need to call function from component A to vomponent B. I made service for get users service.ts

getUsers(): Observable<UserModel[]> {
return this.httpClient.get<UserModel[]>(environment.BASE_URL + this.apiurlAllUsers + "all").pipe(
  catchError(this.handleError)
);

}

And in component A I call this service and set data for ng-bootstrap table

 getUsersInList() {
this.userService.getUsers().subscribe((data: UserModel[]) => {
  this.collectionSize = data.length;
  this.allUsers = data;
});
}

Now when iI submit data in component B (my modal box), call function getUsersInList() from component A

I try use @Output

component B
@Output trigger: new EventEmitter();

submitForm(){
   this.trigger.emit("hello from B");
}


 component A
 parentFn($event: string) {
console.log($event);
this.getUsersInList();
}

And nothing happened...

Also, I try

@Input second: componentA
and directly call function

this.second.getUserInList() //but I get errors

Thnx

Upvotes: 0

Views: 129

Answers (1)

DanielWaw
DanielWaw

Reputation: 699

Well i can't see You htmls but if componentA is a parent of componentB then there should be something like this:

 <app-component-b (trigger)=functionThatIsInParent($event)> 

thats how You pass Output to parent.

EDIT FOR OBSERVABLES:
in service create a subject:

public whatever = new Subject<any>();

then You have to create this:

getThatObservable(): Observable<any> {
    return.this.whatever.asObservable();
}

and also this:

updateObservable(data) {
   this.whatever.next(data);
}

then on submit:

submitForm(){ this.service.updateObservable("hello from B"); }

Then in componentA:

this.service.getThatObservable().subscribe( data => {
         // do whatever with data
      });

Of course that just one of the solutions You can also do not create that updateObservable and just call:

this.service.whatever.next("hello from B");

Upvotes: 1

Related Questions