HTTP : Detect changes in child component when update/save/delete - http

Question

I'm learning HTTP as I go. Unsure how to move forward. I'm doing http calls only in my service.
Then I have a class, Teacher, here's some of the methods:
export class Teacher {
public addStudent(value: Student): void {
this.students.push(value);
}
}
I have a list component that lists teachers, and in that component, the user can click a teacher and move to a detail-page, where it takes user input and adds students to the teacher.
export class TeacherDetailComponent implements OnActivate {
teacher: Teacher;
constructor(public _service: Service, public _router: Router) { }
routerOnActivate(curr: RouteSegment): void {
let id = curr.getParam('id');
this._service.getById(id)
.subscribe(teacher => {
this.teacher = teacher;
});
}
addStudent() {
this.teacher.getStudents().push(new Student());
//what code here?
}
}
There is my headscratcher, how and where do I tell Angular that to update the data for the teacher when a new student is added!

Answer 1

In fact your question is related to component communication. I would create a shared service for this.
See this doc for more details:
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
So I would create a service to notify the list component that a student is added or remove, so it can update the list accordingly. Here is a sample:
#Injectable()
export class StudentService {
userAdded:Subject<Student> = new Subject();
userDeleted:Subject<Student> = new Subject();
constructor(private http:Http) {
}
addStudent(student:Student) {
return this.http.post('/users', ...)
(...)
.do((addedStudent) => {
this.userAdded.next(addedStudent);
});
}
deleteStudent(student:Student) {
return this.http.post('/users', ...)
(...)
.do((removedStudent) => {
this.userRemoved.next(removedStudent);
});
}
}
So you can update your details component:
addStudent() {
let newStudent = new Student();
this.studentService.addStudent(newStudent).subscribe(addedStudent => {
this.teacher.getStudents().push(addedStudent);
});
}
In the list component:
this.studentService.addedStudent.subscribe(addedStudent => {
// do something
});