Call component method from service

Question

I am completly new in angular. I have 2 components, one for displaying list of taks, one for adding new one. They use one service. This is my function in TasksComponent:

getTasks(): void {
  this.tasksService.getTasks()
                       .subscribe(
                           tasks => this.tasks = tasks,
                            err => {
                                console.log(err);
                            });
}

And I have also function for adding new Task in TasksInputFormComponent. So I need to call getTasks() function from another component using shared service. I have found this question How to call component method from service? (angular2) and have tried to do something like in example. I don't understand how to do it right. In tasksService:

private componentMethodCallSource = new Subject<any>();
componentMethodCalled$ = this.componentMethodCallSource.asObservable();

In TasksComponent:

  constructor(private tasksService: TasksService) {
    this.tasksService.componentMethodCalled$.subscribe(
    () => {
      this.tasksService.getTasks()
                       .subscribe(
                           tasks => this.tasks = tasks,
                            err => {
                                console.log(err);
                            });
    }
  );

}

In TasksInputFormComponent:

   addTask(task) {
    ...
    this.tasksService.addTask(...);
    this.tasksService.callComponentMethod();
  }

But this code looks absolutly strange and doesn't work. I can't find how to do it properly.

You're looking for BehaviorSubject, which is along the lines of a Global Variable in Angular. Your service should handle the BehaviorSubject (getting data, changing, etc), and multiple components can receive an Observable of this BehaviorSubject. They will only be able to view the data, and will call functions within the service to change the data. Check out some guides on this, and tag me for questions. — Z. Bagley, Jul 12 '17 at 21:35

score 0 · Answer 1 · answered Jul 12 '17 at 22:00

0

If you want to call a component method from other component you can use ViewChild

@ViewChild(OtherComponent) otherCompt: OtherComponent

and access to method of OtherComponent, example

ngAfterViewInit() {
  this.otherCompt.methodX();
}

answered Jul 12 '17 at 22:00

alehn96

1,363
1
13
23

1

Thanks but i get ERROR TypeError: Cannot read property 'methodX' of undefined – DzouSi Jul 13 '17 at 09:13
He doesn't want to call a component method from other component. He wants to call it from a SERVICE. Why everybody is trying to call a component method from other component ? I want to call a component method from a SERVICE. – canbax Jun 10 '19 at 14:34

score 0 · Answer 2 · answered Jul 12 '17 at 22:13

0

In your service:

    private tasksStreamer:Subject<Task[]> = new Subject();
    private tasks:Task[] = [];

    public addNewTask(task){
       this.tasks.push(task);
       this.tasksStreamer.next(this.tasks);
    }

    public getTasksStreamer():Subject<Task[]>{
       return this.tasksStreamer;
    }

AddTaskComponent:

    this.myservice.addTask(task);

TasksComponent:

    private myTasks:Task[] = [];
    this.myservice.getTasksStreamer()
        .subscribe(tasks => this.myTasks = tasks);

answered Jul 12 '17 at 22:13

Nour

5,609
3
21
24

Thanks for your comment, but it doesn't help. Still nothing is refreshing after adding new task. – DzouSi Jul 13 '17 at 09:01
You are welcome, if that does not help you should tell the component to redraw it self by use ChangeDetectionRef object which provided by angular – Nour Jul 13 '17 at 14:23

Call component method from service

2 Answers2