title: Update View in Angular 4.x After Updating Content
body: <p>I have an Angular Application in Which I have a <code>UserComponent</code> with Crud functionality. Everything working good but I don't know how to update the view when I Update a particular record. For a delete operation, I simply filter the array of objects to Update the view. But I want to Know how to update view after an update operation.</p>
  
  <p>I have tried to calling the function like this:-</p>
  
  <pre><code>Observable.timer(5000).first().subscribe(()=&gt;this.functionName());
  </code></pre>
  
  <p>But I don't want to call that function in every 5s.Only call when update statement is executed.</p>
  
  <p>Component</p>
  
  <pre><code>import { Component, OnInit, Inject } from '@angular/core';
  import { MdDialogRef, MD_DIALOG_DATA } from "@angular/material";
  import { User } from "app/user";
  import { FormGroup ,Validators,FormControl} from "@angular/forms";
  import {UserService} from "../user.service";
  
  @Component({
    selector: 'app-update-user',
    templateUrl: './update-user.component.html',
    styleUrls: ['./update-user.component.css']
  })
  export class UpdateUserComponent implements OnInit {
    UpdateForm : FormGroup;
    User : User;
  
    constructor(@Inject(MD_DIALOG_DATA) private data: { user: User }, private mdDialogRef: MdDialogRef&lt;UpdateUserComponent&gt;,private userService : UserService) {
  
     }
  
    ngOnInit() {
      this.User=this.data.user;
      this.UpdateForm=new FormGroup({
        Id : new FormControl(this.User.Id),
        FirstName : new FormControl(this.User.FirstName,[&lt;any&gt;Validators.required]),
        LastName : new FormControl(this.User.LastName,[&lt;any&gt;Validators.required]),
        Email : new FormControl(this.User.Email,[&lt;any&gt;Validators.required]),
        Mobile : new FormControl(this.User.Mobile,[&lt;any&gt;Validators.required]),
      })
    }
  
    Save(model : User)
    {
        this.userService.Update(model).subscribe(res=&gt;{
               this.mdDialogRef.close(); 
        });
    }
  
  }
  </code></pre>
  
  <p>Service to update the database </p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {Http,Headers} from "@angular/http";
  import {Observable} from "rxjs";
  @Injectable()
  export class UserService {
  
    constructor(private _http : Http) { }
     Update(model : any)
    {
      var headers= new Headers();
       headers.append('Content-Type', 'application/json');
       return this._http.put("/api/Update/",JSON.stringify(model),{headers : headers}).map(res=&gt;res.json());
    }
  }
  </code></pre>