How to update two components when edit?

Question

I have two components. The first component contains a form and an update button.

And in the second component there is some information that should just change during the update.

So how can I add this.loadSum() to onSave() if they are in different components?

component.ts 1:

onSave() {
  this.loading = true;
  this._svodService.update(this.dayReport.hour_id, this.form.value).subscribe(
    () => {
      this._toast.success("Saved.");
      this.load();
      this.loading = false;
    },
    error => {
      this._toast.error(error.error.message);
      this.load();
      this.loading = false;
    }
  )
}

component.ts 2:

  loadSum() {
    this._svodService.getSinkingYear(this.hour_id).subscribe(sinkingYear => {
      this.sinkingYear = sinkingYear
    }, error => {
      this._toast.error(error.error.message);
    })
  }

Does this answer your question? [How to communicate between component in Angular?](https://stackoverflow.com/questions/30501577/how-to-communicate-between-component-in-angular) — Smokey Dawson, Jan 20 '20 at 03:40

score 0 · Accepted Answer · answered Jan 20 '20 at 03:52

You can acheive this using ViewChild that allows you to have access of the members of another component. So in your component1.ts you can do like this

import { Component, OnInit, ViewChild } from '@angular/core';

import { ChildComponent } from '../child/child';


export class parentComponent implements OnInit{ 
    @ViewChild(ChildComponent ) child: ChildComponent ; 

     onSave() {
       this.loading = true;
       this._svodService.update(this.dayReport.hour_id, this.form.value).subscribe(
        () => {
           this._toast.success("Saved.");
           this.child.loadSum();
           this.load();
           this.loading = false;
        },
      error => {
       this._toast.error(error.error.message);
       this.load();
       this.loading = false;
      }
     )
   }
}

How to update two components when edit?

1 Answers1