Reputation: 2324
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
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